docs: update portal for WRNexusJS 0.4.0

app/pages/components/accordion.wrn

@@ -10,10 +10,10 @@ page Accordioncomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Accordion</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Accordion</h1><p>Theme-aware, responsive accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Accordion
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Accordion</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Accordion</h1><p>Theme-aware, responsive accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Accordion
   size=&quot;default&quot;
   color=&quot;primary&quot;
   items=&quot;[]&quot;
@@ -37,7 +37,7 @@ page Accordioncomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/advanced-date-picker.wrn

@@ -10,10 +10,10 @@ page AdvancedDatePickercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedDatePicker</h1><p>Theme-aware, responsive advanced date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedDatePicker
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedDatePicker</h1><p>Theme-aware, responsive advanced date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedDatePicker
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Advanced Date Picker&quot;
@@ -39,7 +39,7 @@ page AdvancedDatePickercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/advanced-range-slider.wrn

@@ -10,10 +10,10 @@ page AdvancedRangeSlidercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedRangeSlider</h1><p>Theme-aware, responsive advanced range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedRangeSlider
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedRangeSlider</h1><p>Theme-aware, responsive advanced range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedRangeSlider
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Advanced Range Slider&quot;
@@ -39,7 +39,7 @@ page AdvancedRangeSlidercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/advanced-select.wrn

@@ -10,10 +10,10 @@ page AdvancedSelectcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedSelect</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>AdvancedSelect</h1><p>Theme-aware, responsive advanced select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>51 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedSelect
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedSelect</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>AdvancedSelect</h1><p>Theme-aware, responsive advanced select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>51 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedSelect
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Advanced Select&quot;
@@ -486,7 +486,7 @@ page AdvancedSelectcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/alert.wrn

@@ -10,16 +10,16 @@ page Alertcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Alert</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Alert</h1><p>Theme-aware, responsive alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Alert
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Alert</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Alert</h1><p>Theme-aware, responsive alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Alert
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Alert&quot;
   description=&quot;description&quot;
   items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Alert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Alert&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Alert.wrn</code></p><pre data-language="wrn"><code>component Alert &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Alert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Alert&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/alert.wrn</code></p><pre data-language="wrn"><code>component Alert &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -39,7 +39,7 @@ page Alertcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/avatar-group.wrn

@@ -10,10 +10,10 @@ page AvatarGroupcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>AvatarGroup</h1><p>Theme-aware, responsive avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AvatarGroup
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>AvatarGroup</h1><p>Theme-aware, responsive avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AvatarGroup
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Avatar Group&quot;
@@ -39,7 +39,7 @@ page AvatarGroupcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/avatar.wrn

@@ -10,16 +10,16 @@ page Avatarcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Avatar</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Avatar</h1><p>Theme-aware, responsive avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Avatar
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Avatar</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Avatar</h1><p>Theme-aware, responsive avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Avatar
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Avatar&quot;
   description=&quot;description&quot;
   items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Avatar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Avatar&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Avatar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Avatar&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -39,7 +39,7 @@ page Avatarcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/badge.wrn

@@ -10,16 +10,16 @@ page Badgecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Badge</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Badge</h1><p>Theme-aware, responsive badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Badge
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Badge</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Badge</h1><p>Theme-aware, responsive badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Badge
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Badge&quot;
   description=&quot;description&quot;
   items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Badge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Badge&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Badge.wrn</code></p><pre data-language="wrn"><code>component Badge &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Badge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Badge&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/badge.wrn</code></p><pre data-language="wrn"><code>component Badge &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -39,7 +39,7 @@ page Badgecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/blockquote.wrn

@@ -10,10 +10,10 @@ page Blockquotecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Blockquote</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Blockquote</h1><p>Theme-aware, responsive blockquote component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Blockquote
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Blockquote</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Blockquote</h1><p>Theme-aware, responsive blockquote component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Blockquote
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Blockquote&quot;
@@ -39,7 +39,7 @@ page Blockquotecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/breadcrumb.wrn

@@ -10,10 +10,10 @@ page Breadcrumbcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumb</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Breadcrumb</h1><p>Theme-aware, responsive breadcrumb component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Breadcrumb
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumb</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Breadcrumb</h1><p>Theme-aware, responsive breadcrumb component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Breadcrumb
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Breadcrumb&quot;
@@ -37,7 +37,7 @@ page Breadcrumbcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/button-group.wrn

@@ -10,10 +10,10 @@ page ButtonGroupcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ButtonGroup</h1><p>Theme-aware, responsive button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ButtonGroup
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ButtonGroup</h1><p>Theme-aware, responsive button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ButtonGroup
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Button Group&quot;
@@ -39,7 +39,7 @@ page ButtonGroupcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/button.wrn

@@ -10,16 +10,16 @@ page Buttoncomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Button</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Button</h1><p>Theme-aware, responsive button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>25 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Button
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Button</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Button</h1><p>Theme-aware, responsive button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>25 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Button
   label=&quot;Button&quot;
   loadingLabel=&quot;Loading…&quot;
   description=&quot;description&quot;
   as=&quot;as&quot;
   href=&quot;href&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Button&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Button&quot;</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading…&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>as</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>pill</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaPressed</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaExpanded</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaControls</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>autofocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>controlClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Button.wrn</code></p><pre data-language="wrn"><code>component Button &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Button&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Button&quot;</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading…&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>as</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>pill</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaPressed</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaExpanded</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaControls</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>autofocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>controlClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/button.wrn</code></p><pre data-language="wrn"><code>component Button &#123;
   props &#123;
     label = &quot;Button&quot;
     loadingLabel = &quot;Loading…&quot;
@@ -181,7 +181,7 @@ page Buttoncomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/card.wrn

@@ -10,16 +10,16 @@ page Cardcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Card</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Card</h1><p>Theme-aware, responsive card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Card
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Card</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Card</h1><p>Theme-aware, responsive card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Card
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Card&quot;
   description=&quot;description&quot;
   items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Card&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Card&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Card.wrn</code></p><pre data-language="wrn"><code>component Card &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Card&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Card&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/card.wrn</code></p><pre data-language="wrn"><code>component Card &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -39,7 +39,7 @@ page Cardcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/carousel.wrn

@@ -10,10 +10,10 @@ page Carouselcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Carousel</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Carousel</h1><p>Theme-aware, responsive carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Carousel
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Carousel</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Carousel</h1><p>Theme-aware, responsive carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Carousel
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Carousel&quot;
@@ -39,7 +39,7 @@ page Carouselcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/chart.wrn

@@ -10,10 +10,10 @@ page Chartcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Chart</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Chart</h1><p>Theme-aware, responsive chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Chart
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Chart</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Chart</h1><p>Theme-aware, responsive chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Chart
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Chart&quot;
@@ -39,7 +39,7 @@ page Chartcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/chat-bubble.wrn

@@ -10,10 +10,10 @@ page ChatBubblecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChatBubble</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ChatBubble</h1><p>Theme-aware, responsive chat bubble component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChatBubble
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChatBubble</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ChatBubble</h1><p>Theme-aware, responsive chat bubble component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChatBubble
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Chat Bubble&quot;
@@ -39,7 +39,7 @@ page ChatBubblecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/checkbox.wrn

@@ -10,16 +10,16 @@ page Checkboxcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Checkbox</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Checkbox</h1><p>Theme-aware, responsive checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Checkbox
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Checkbox</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Checkbox</h1><p>Theme-aware, responsive checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Checkbox
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Checkbox&quot;
   name=&quot;name&quot;
   value=&quot;on&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Checkbox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Checkbox&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Checkbox.wrn</code></p><pre data-language="wrn"><code>component Checkbox &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Checkbox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Checkbox&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/checkbox.wrn</code></p><pre data-language="wrn"><code>component Checkbox &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -38,7 +38,7 @@ page Checkboxcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/clipboard.wrn

@@ -10,10 +10,10 @@ page Clipboardcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Clipboard</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Clipboard</h1><p>Theme-aware, responsive clipboard component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Clipboard
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Clipboard</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Clipboard</h1><p>Theme-aware, responsive clipboard component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Clipboard
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Clipboard&quot;
@@ -39,7 +39,7 @@ page Clipboardcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/collapse.wrn

@@ -10,10 +10,10 @@ page Collapsecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Collapse</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Collapse</h1><p>Theme-aware, responsive collapse component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Collapse
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Collapse</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Collapse</h1><p>Theme-aware, responsive collapse component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Collapse
   size=&quot;default&quot;
   color=&quot;primary&quot;
   items=&quot;[]&quot;
@@ -37,7 +37,7 @@ page Collapsecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/color-picker.wrn

@@ -10,10 +10,10 @@ page ColorPickercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorPicker</h1><p>Theme-aware, responsive color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorPicker
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorPicker</h1><p>Theme-aware, responsive color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorPicker
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Color Picker&quot;
@@ -43,7 +43,7 @@ page ColorPickercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/columns.wrn

@@ -10,10 +10,10 @@ page Columnscomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Columns</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Columns</h1><p>Theme-aware, responsive columns component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Columns
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Columns</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Columns</h1><p>Theme-aware, responsive columns component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Columns
   size=&quot;default&quot;
   color=&quot;primary&quot;
   columns=&quot;2&quot;
@@ -35,7 +35,7 @@ page Columnscomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/combo-box.wrn

@@ -10,16 +10,16 @@ page ComboBoxcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComboBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ComboBox</h1><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>41 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComboBox
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComboBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ComboBox</h1><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>41 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComboBox
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;ComboBox&quot;
   name=&quot;name&quot;
   value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComboBox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ComboBox&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>groups</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search or select an option&quot;</code></td></tr><tr><td><code>searchPlaceholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Start typing…&quot;</code></td></tr><tr><td><code>clearable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allowCustomValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>validationMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading suggestions…&quot;</code></td></tr><tr><td><code>emptyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No matching options&quot;</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear value&quot;</code></td></tr><tr><td><code>toggleLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Toggle suggestions&quot;</code></td></tr><tr><td><code>searchMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;contains&quot;</code></td></tr><tr><td><code>searchFields</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;label,description&quot;</code></td></tr><tr><td><code>minSearchLength</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>searchResultLimit</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>optionTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>defaultOpen</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeOnSelect</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>fixed</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;off&quot;</code></td></tr><tr><td><code>remote</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>remoteUrl</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>remoteQueryParam</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;q&quot;</code></td></tr><tr><td><code>remoteDebounce</code></td><td><code>number</code></td><td>Optional</td><td><code>250</code></td></tr><tr><td><code>remoteAutoLoad</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>infinite</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>hasMore</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>page</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>loadLine truncated
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComboBox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ComboBox&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>groups</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search or select an option&quot;</code></td></tr><tr><td><code>searchPlaceholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Start typing…&quot;</code></td></tr><tr><td><code>clearable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allowCustomValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>validationMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading suggestions…&quot;</code></td></tr><tr><td><code>emptyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No matching options&quot;</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear value&quot;</code></td></tr><tr><td><code>toggleLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Toggle suggestions&quot;</code></td></tr><tr><td><code>searchMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;contains&quot;</code></td></tr><tr><td><code>searchFields</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;label,description&quot;</code></td></tr><tr><td><code>minSearchLength</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>searchResultLimit</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>optionTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>defaultOpen</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeOnSelect</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>fixed</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;off&quot;</code></td></tr><tr><td><code>remote</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>remoteUrl</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>remoteQueryParam</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;q&quot;</code></td></tr><tr><td><code>remoteDebounce</code></td><td><code>number</code></td><td>Optional</td><td><code>250</code></td></tr><tr><td><code>remoteAutoLoad</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>infinite</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>hasMore</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>page</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>loadLine truncated
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -413,7 +413,7 @@ page ComboBoxcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/confetti.wrn

@@ -10,10 +10,10 @@ page Confetticomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Confetti</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Confetti</h1><p>Theme-aware, responsive confetti component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Confetti
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Confetti</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Confetti</h1><p>Theme-aware, responsive confetti component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Confetti
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Confetti&quot;
@@ -39,7 +39,7 @@ page Confetticomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/container.wrn

@@ -10,16 +10,16 @@ page Containercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Container</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Container</h1><p>Theme-aware, responsive container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Container
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Container</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Container</h1><p>Theme-aware, responsive container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Container
   size=&quot;default&quot;
   color=&quot;primary&quot;
   columns=&quot;2&quot;
   gap=&quot;md&quot;
   maxWidth=&quot;xl&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Container&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Container.wrn</code></p><pre data-language="wrn"><code>component Container &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Container&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/container.wrn</code></p><pre data-language="wrn"><code>component Container &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -35,7 +35,7 @@ page Containercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/context-menu.wrn

@@ -10,10 +10,10 @@ page ContextMenucomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContextMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ContextMenu</h1><p>Theme-aware, responsive context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContextMenu
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContextMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ContextMenu</h1><p>Theme-aware, responsive context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContextMenu
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Context Menu&quot;
@@ -42,7 +42,7 @@ page ContextMenucomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/copy-markup.wrn

@@ -10,10 +10,10 @@ page CopyMarkupcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyMarkup</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>CopyMarkup</h1><p>Theme-aware, responsive copy markup component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CopyMarkup
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyMarkup</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>CopyMarkup</h1><p>Theme-aware, responsive copy markup component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CopyMarkup
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Copy Markup&quot;
@@ -43,7 +43,7 @@ page CopyMarkupcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/custom-scrollbar.wrn

@@ -10,10 +10,10 @@ page CustomScrollbarcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomScrollbar</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CustomScrollbar</h1><p>Theme-aware, responsive custom scrollbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CustomScrollbar
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomScrollbar</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CustomScrollbar</h1><p>Theme-aware, responsive custom scrollbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CustomScrollbar
   size=&quot;default&quot;
   color=&quot;primary&quot;
   columns=&quot;2&quot;
@@ -35,7 +35,7 @@ page CustomScrollbarcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/data-map.wrn

@@ -10,10 +10,10 @@ page DataMapcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataMap</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataMap</h1><p>Theme-aware, responsive data map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataMap
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataMap</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataMap</h1><p>Theme-aware, responsive data map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataMap
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Data Map&quot;
@@ -39,7 +39,7 @@ page DataMapcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/data-table.wrn

@@ -10,10 +10,10 @@ page DataTablecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataTable</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataTable</h1><p>Theme-aware, responsive data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataTable
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataTable</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataTable</h1><p>Theme-aware, responsive data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataTable
   size=&quot;default&quot;
   color=&quot;primary&quot;
   caption=&quot;Data Table&quot;
@@ -43,7 +43,7 @@ page DataTablecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/date-picker.wrn

@@ -10,10 +10,10 @@ page DatePickercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DatePicker</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DatePicker</h1><p>Theme-aware, responsive date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DatePicker
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DatePicker</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DatePicker</h1><p>Theme-aware, responsive date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DatePicker
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Date Picker&quot;
@@ -43,7 +43,7 @@ page DatePickercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/device-frame.wrn

@@ -10,10 +10,10 @@ page DeviceFramecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeviceFrame</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DeviceFrame</h1><p>Theme-aware, responsive device frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeviceFrame
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeviceFrame</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DeviceFrame</h1><p>Theme-aware, responsive device frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeviceFrame
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Device Frame&quot;
@@ -39,7 +39,7 @@ page DeviceFramecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/divider.wrn

@@ -10,15 +10,15 @@ page Dividercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Divider</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Divider</h1><p>Theme-aware, responsive divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Divider
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Divider</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Divider</h1><p>Theme-aware, responsive divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Divider
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;label&quot;
   orientation=&quot;horizontal&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Divider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Divider.wrn</code></p><pre data-language="wrn"><code>component Divider &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Divider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/divider.wrn</code></p><pre data-language="wrn"><code>component Divider &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -31,7 +31,7 @@ page Dividercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/drag-and-drop.wrn

@@ -10,10 +10,10 @@ page DragAndDropcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DragAndDrop</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DragAndDrop</h1><p>Theme-aware, responsive drag and drop component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DragAndDrop
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DragAndDrop</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DragAndDrop</h1><p>Theme-aware, responsive drag and drop component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DragAndDrop
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Drag And Drop&quot;
@@ -39,7 +39,7 @@ page DragAndDropcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/drawer.wrn

@@ -10,10 +10,10 @@ page Drawercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Drawer</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Drawer</h1><p>Theme-aware, responsive drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Drawer
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Drawer</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Drawer</h1><p>Theme-aware, responsive drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Drawer
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Drawer&quot;
@@ -42,7 +42,7 @@ page Drawercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/dropdown.wrn

@@ -10,10 +10,10 @@ page Dropdowncomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Dropdown</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Dropdown</h1><p>Theme-aware, responsive dropdown component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Dropdown
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Dropdown</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Dropdown</h1><p>Theme-aware, responsive dropdown component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Dropdown
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Dropdown&quot;
@@ -42,7 +42,7 @@ page Dropdowncomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/file-input.wrn

@@ -10,10 +10,10 @@ page FileInputcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FileInput</h1><p>Theme-aware, responsive file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileInput
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FileInput</h1><p>Theme-aware, responsive file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileInput
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;File Input&quot;
@@ -43,7 +43,7 @@ page FileInputcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/file-upload-progress.wrn

@@ -10,10 +10,10 @@ page FileUploadProgresscomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUploadProgress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>FileUploadProgress</h1><p>Theme-aware, responsive file upload progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileUploadProgress
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUploadProgress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>FileUploadProgress</h1><p>Theme-aware, responsive file upload progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileUploadProgress
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Progress&quot;
@@ -39,7 +39,7 @@ page FileUploadProgresscomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/file-upload.wrn

@@ -10,10 +10,10 @@ page FileUploadcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUpload</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>FileUpload</h1><p>Theme-aware, responsive file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileUpload
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUpload</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>FileUpload</h1><p>Theme-aware, responsive file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileUpload
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;File Upload&quot;
@@ -39,7 +39,7 @@ page FileUploadcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/grid.wrn

@@ -10,16 +10,16 @@ page Gridcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Grid</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Grid</h1><p>Theme-aware, responsive grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Grid
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Grid</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Grid</h1><p>Theme-aware, responsive grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Grid
   size=&quot;default&quot;
   color=&quot;primary&quot;
   columns=&quot;2&quot;
   gap=&quot;md&quot;
   maxWidth=&quot;xl&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Grid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Grid.wrn</code></p><pre data-language="wrn"><code>component Grid &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Grid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/grid.wrn</code></p><pre data-language="wrn"><code>component Grid &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -35,7 +35,7 @@ page Gridcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/image.wrn

@@ -10,10 +10,10 @@ page Imagecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Image</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Image</h1><p>Theme-aware, responsive image component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>9 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Image
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Image</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Image</h1><p>Theme-aware, responsive image component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>9 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Image
   size=&quot;default&quot;
   color=&quot;primary&quot;
   src=&quot;src&quot;
@@ -39,7 +39,7 @@ page Imagecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/input-group.wrn

@@ -10,10 +10,10 @@ page InputGroupcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>InputGroup</h1><p>Theme-aware, responsive input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InputGroup
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>InputGroup</h1><p>Theme-aware, responsive input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InputGroup
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Input Group&quot;
@@ -43,7 +43,7 @@ page InputGroupcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/input-number.wrn

@@ -10,40 +10,644 @@ page InputNumbercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputNumber</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>InputNumber</h1><p>Theme-aware, responsive input number component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InputNumber
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputNumber</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>InputNumber</h1><p>Theme-aware, responsive input number component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>40 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InputNumber
   size=&quot;default&quot;
   color=&quot;primary&quot;
-  label=&quot;Input Number&quot;
-  name=&quot;name&quot;
-  value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InputNumber&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Input Number&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;number&quot;</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InputNumber.wrn</code></p><pre data-language="wrn"><code>component InputNumber &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Input Number&quot;
-    name = &quot;&quot;
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;number&quot;
-    min = &quot;&quot;
-    max = &quot;&quot;
-    step = &quot;&quot;
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--input-number &#123;class&#125;&quot;&gt;
+  variant=&quot;default&quot;
+  id=&quot;id&quot;
+  name=&quot;quantity&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InputNumber&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;quantity&quot;</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>step</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>precision</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;auto&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>prefix</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>suffix</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;off&quot;</code></td></tr><tr><td><code>inputMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;decimal&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>inputDisabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>buttonsDisabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>allowInput</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>keyboard</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>wheel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>clamp</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showButtons</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showValidationMessage</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>decrementLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Decrease value&quot;</code></td></tr><tr><td><code>incrementLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Increase value&quot;</code></td></tr><tr><td><code>controlsLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Quantity controls&quot;</code></td></tr><tr><td><code>requiredMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;A value is required.&quot;</code></td></tr><tr><td><code>minMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Value is below the minimum.&quot;</code></td></tr><tr><td><code>maxMessage</code></td><td><code>string</code></td><td>OptioLine truncated
+    props &#123;
+        size = &quot;default&quot;
+        color = &quot;primary&quot;
+        variant = &quot;default&quot;
+        class = &quot;&quot;
+
+        id = &quot;&quot;
+        name = &quot;quantity&quot;
+        value = 0
+        min = &quot;&quot;
+        max = &quot;&quot;
+        step = 1
+        precision = &quot;auto&quot;
+
+        label = &quot;&quot;
+        description = &quot;&quot;
+        helpText = &quot;&quot;
+        error = &quot;&quot;
+        invalid = false
+
+        prefix = &quot;&quot;
+        suffix = &quot;&quot;
+        placeholder = &quot;&quot;
+        autocomplete = &quot;off&quot;
+        inputMode = &quot;decimal&quot;
+        ariaLabel = &quot;&quot;
+
+        required = false
+        disabled = false
+        inputDisabled = false
+        buttonsDisabled = false
+        readonly = false
+        allowInput = true
+        keyboard = true
+        wheel = false
+        clamp = true
+        fullWidth = false
+        showButtons = true
+        showValidationMessage = true
+
+        decrementLabel = &quot;Decrease value&quot;
+        incrementLabel = &quot;Increase value&quot;
+        controlsLabel = &quot;Quantity controls&quot;
+        requiredMessage = &quot;A value is required.&quot;
+        minMessage = &quot;Value is below the minimum.&quot;
+        maxMessage = &quot;Value is above the maximum.&quot;
+
+        @event input = function
+        @event change = function
+        @event increment = function
+        @event decrement = function
+    &#125;
+
+    state currentValue = value
+    state committedValue = value
+
+    functions &#123;
+        function inputId() &#123;
+            if (id !== &quot;&quot;) &#123;
+                return id
+            &#125;
+
+            if (name !== &quot;&quot;) &#123;
+                return name
+            &#125;
+
+            return &quot;input-number&quot;
+        &#125;
+
+        function descriptionId() &#123;
+            return inputId() + &quot;-description&quot;
+        &#125;
+
+        function messageId() &#123;
+            return inputId() + &quot;-message&quot;
+        &#125;
+
+        function componentColor() &#123;
+            if (color === &quot;secondary&quot;) &#123;
+                return &quot;var(--wire-color-secondary)&quot;
+            &#125;
+
+            if (color === &quot;success&quot;) &#123;
+                return &quot;var(--wire-color-success)&quot;
+            &#125;
+
+            if (color === &quot;warning&quot;) &#123;
+                return &quot;var(--wire-color-warning)&quot;
+            &#125;
+
+            if (color === &quot;danger&quot;) &#123;
+                return &quot;var(--wire-color-danger)&quot;
+            &#125;
+
+            if (color === &quot;info&quot;) &#123;
+                return &quot;var(--wire-color-info)&quot;
+            &#125;
+
+            return &quot;var(--wire-color-primary)&quot;
+        &#125;
+
+        function hasMin() &#123;
+            return min !== &quot;&quot; &amp;&amp; min !== null &amp;&amp; min !== undefined
+        &#125;
+
+        function hasMax() &#123;
+            return max !== &quot;&quot; &amp;&amp; max !== null &amp;&amp; max !== undefined
+        &#125;
+
+        function isBlank() &#123;
+            return currentValue === &quot;&quot; || currentValue === null || currentValue === undefined
+        &#125;
+
+        function normalizedStep() &#123;
+            return Number(step) &gt; 0 ? Number(step) : 1
+        &#125;
+
+        function inferredPrecision() &#123;
+            if (precision !== &quot;auto&quot; &amp;&amp; precision !== &quot;&quot;) &#123;
+                return Math.max(0, Number(precision) || 0)
+            &#125;
+
+            if (String(normalizedStep()).includes(&quot;.&quot;)) &#123;
+                return String(normalizedStep()).split(&quot;.&quot;)[1].length
+            &#125;
+
+            return 0
+        &#125;
+
+        function precisionFactor() &#123;
+            return Math.pow(10, inferredPrecision())
+        &#125;
+
+        function roundValue(nextValue) &#123;
+            return Math.round(Number(nextValue) * precisionFactor()) / precisionFactor()
+        &#125;
+
+        function clampValue(nextValue) &#123;
+            nextValue = Number(nextValue)
+
+            if (hasMin() &amp;&amp; nextValue &lt; Number(min)) &#123;
+                nextValue = Number(min)
+            &#125;
+
+            if (hasMax() &amp;&amp; nextValue &gt; Number(max)) &#123;
+                nextValue = Number(max)
+            &#125;
+
+            return roundValue(nextValue)
+        &#125;
+
+        function isBelowMin() &#123;
+            return !isBlank() &amp;&amp; hasMin() &amp;&amp; Number(currentValue) &lt; Number(min)
+        &#125;
+
+        function isAboveMax() &#123;
+            return !isBlank() &amp;&amp; hasMax() &amp;&amp; Number(currentValue) &gt; Number(max)
+        &#125;
+
+        function isInvalid() &#123;
+            return (
+                invalid ||
+                error !== &quot;&quot; ||
+                (required &amp;&amp; isBlank()) ||
+                isBelowMin() ||
+                isAboveMax()
+            )
+        &#125;
+
+        function validationMessage() &#123;
+            if (error !== &quot;&quot;) &#123;
+                return error
+            &#125;
+
+            if (required &amp;&amp; isBlank()) &#123;
+                return requiredMessage
+            &#125;
+
+            if (isBelowMin()) &#123;
+                return minMessage
+            &#125;
+
+            if (isAboveMax()) &#123;
+                return maxMessage
+            &#125;
+
+            return &quot;&quot;
+        &#125;
+
+        function hasMessage() &#123;
+            return (
+                helpText !== &quot;&quot; ||
+                (showValidationMessage &amp;&amp; isInvalid() &amp;&amp; validationMessage() !== &quot;&quot;)
+            )
+        &#125;
+
+        function describedBy() &#123;
+            if (description !== &quot;&quot; &amp;&amp; hasMessage()) &#123;
+                return descriptionId() + &quot; &quot; + messageId()
+            &#125;
+
+            if (description !== &quot;&quot;) &#123;
+                return descriptionId()
+            &#125;
+
+            if (hasMessage()) &#123;
+                return messageId()
+            &#125;
+
+            return &quot;&quot;
+        &#125;
+
+        function decrementDisabled() &#123;
+            return (
+                disabled ||
+                readonly ||
+                buttonsDisabled ||
+                (hasMin() &amp;&amp; !isBlank() &amp;&amp; Number(currentValue) &lt;= Number(min))
+            )
+        &#125;
+
+        function incrementDisabled() &#123;
+            return (
+                disabled ||
+                readonly ||
+                buttonsDisabled ||
+                (hasMax() &amp;&amp; !isBlank() &amp;&amp; Number(currentValue) &gt;= Number(max))
+            )
+        &#125;
+
+        function dispatchInputNumberEvent(
+            sourceEvent,
+            eventName,
+            action,
+            previousValue,
+            root,
+            customEvent
+        ) &#123;
+            root = sourceEvent.currentTarget.closest(&quot;[data-wrn-input-number]&quot;)
+
+            if (!root &amp;&amp; sourceEvent.target) &#123;
+                root = sourceEvent.target.closest(&quot;[data-wrn-input-number]&quot;)
+            &#125;
+
+            if (!root) &#123;
+                return
+            &#125;
+
+            customEvent = document.createEvent(&quot;CustomEvent&quot;)
+            customEvent.initCustomEvent(eventName, true, false, &#123;
+                component: &quot;InputNumber&quot;,
+                name: name,
+                value: currentValue,
+                previousValue: previousValue,
+                action: action,
+                min: hasMin() ? Number(min) : null,
+                max: hasMax() ? Number(max) : null,
+                step: normalizedStep(),
+                valid: !isInvalid()
+            &#125;)
+            root.dispatchEvent(customEvent)
+        &#125;
+
+        function applyControlValue(nextValue, action, sourceEvent, previousValue) &#123;
+            previousValue = currentValue
+            currentValue = clampValue(nextValue)
+            committedValue = currentValue
+
+            dispatchInputNumberEvent(
+                sourceEvent,
+                &quot;input&quot;,
+                action,
+                previousValue
+            )
+            dispatchInputNumberEvent(
+                sourceEvent,
+                &quot;change&quot;,
+                action,
+                previousValue
+            )
+            dispatchInputNumberEvent(
+                sourceEvent,
+                action,
+                action,
+                previousValue
+            )
+        &#125;
+
+        function incrementValue(sourceEvent, nextValue) &#123;
+            if (incrementDisabled()) &#123;
+                return
+            &#125;
+
+            if (isBlank()) &#123;
+                nextValue = hasMin() ? Number(min) : normalizedStep()
+            &#125; else &#123;
+                nextValue =
+                    Number(currentValue) +
+                    normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+            &#125;
+
+            applyControlValue(nextValue, &quot;increment&quot;, sourceEvent)
+        &#125;
+
+        function decrementValue(sourceEvent, nextValue) &#123;
+            if (decrementDisabled()) &#123;
+                return
+            &#125;
+
+            if (isBlank()) &#123;
+                nextValue = hasMax() ? Number(max) : -normalizedStep()
+            &#125; else &#123;
+                nextValue =
+                    Number(currentValue) -
+                    normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+            &#125;
+
+            applyControlValue(nextValue, &quot;decrement&quot;, sourceEvent)
+        &#125;
+
+        function handleInput(sourceEvent, previousValue, nextValue) &#123;
+            sourceEvent.stopPropagation()
+            previousValue = currentValue
+            nextValue = sourceEvent.target.value
+
+            if (nextValue === &quot;&quot;) &#123;
+                currentValue = &quot;&quot;
+            &#125; else if (!Number.isNaN(Number(nextValue))) &#123;
+                currentValue = roundValue(Number(nextValue))
+            &#125;
+
+            dispatchInputNumberEvent(
+                sourceEvent,
+                &quot;input&quot;,
+                &quot;input&quot;,
+                previousValue
+            )
+        &#125;
+
+        function handleChange(sourceEvent, previousValue) &#123;
+            sourceEvent.stopPropagation()
+            previousValue = committedValue
+
+            if (!isBlank()) &#123;
+                currentValue = clamp
+                    ? clampValue(currentValue)
+                    : roundValue(currentValue)
+            &#125;
+
+            committedValue = currentValue
+
+            dispatchInputNumberEvent(
+                sourceEvent,
+                &quot;change&quot;,
+                &quot;change&quot;,
+                previousValue
+            )
+        &#125;
+
+        function handleKeydown(sourceEvent) &#123;
+            if (
+                !keyboard ||
+                disabled ||
+                readonly ||
+                inputDisabled ||
+                !allowInput
+            ) &#123;
+                return
+            &#125;
+
+            if (sourceEvent.key === &quot;ArrowUp&quot;) &#123;
+                sourceEvent.preventDefault()
+                incrementValue(sourceEvent)
+            &#125; else if (sourceEvent.key === &quot;ArrowDown&quot;) &#123;
+                sourceEvent.preventDefault()
+                decrementValue(sourceEvent)
+            &#125; else if (sourceEvent.key === &quot;Home&quot; &amp;&amp; hasMin()) &#123;
+                sourceEvent.preventDefault()
+                applyControlValue(Number(min), &quot;decrement&quot;, sourceEvent)
+            &#125; else if (sourceEvent.key === &quot;End&quot; &amp;&amp; hasMax()) &#123;
+                sourceEvent.preventDefault()
+                applyControlValue(Number(max), &quot;increment&quot;, sourceEvent)
+            &#125;
+        &#125;
+
+        function handleWheel(sourceEvent) &#123;
+            if (
+                !wheel ||
+                disabled ||
+                readonly ||
+                inputDisabled ||
+                !allowInput
+            ) &#123;
+                return
+            &#125;
+
+            sourceEvent.preventDefault()
+
+            if (sourceEvent.deltaY &lt; 0) &#123;
+                incrementValue(sourceEvent)
+            &#125; else if (sourceEvent.deltaY &gt; 0) &#123;
+                decrementValue(sourceEvent)
+            &#125;
+        &#125;
+    &#125;
+
+    view &#123;
+        &lt;div
+            &#123;...attrs&#125;
+            data-wrn-input-number
+            data-variant='&#123;variant&#125;'
+            data-size='&#123;size&#125;'
+            data-color='&#123;color&#125;'
+            data-value='&#123;currentValue&#125;'
+            data-invalid='&#123;isInvalid() ? &quot;true&quot; : &quot;false&quot;&#125;'
+            data-disabled='&#123;disabled ? &quot;true&quot; : &quot;false&quot;&#125;'
+            style='--input-number-accent: &#123;componentColor()&#125;;'
+            class='relative flex flex-col gap-1.5 text-[var(--wire-color-text)] &#123;fullWidth ? &quot;w-full&quot; : variant === &quot;compact&quot; ? &quot;w-fit max-w-full&quot; : &quot;w-full max-w-sm&quot;&#125; &#123;disabled ? &quot;opacity-60&quot; : &quot;&quot;&#125; &#123;class&#125;'
+        &gt;
+            &#123;#if label !== &quot;&quot; &amp;&amp; variant !== &quot;labeled&quot; &amp;&amp; variant !== &quot;seat&quot;&#125;
+            &lt;label
+                for='&#123;inputId()&#125;'
+                class='inline-flex items-center gap-1 text-sm font-semibold leading-5 text-[var(--wire-color-text)]'
+            &gt;
         &lt;span&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;input &#123;...attrs&#125; type=&quot;&#123;type&#125;&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; min=&quot;&#123;min&#125;&quot; max=&quot;&#123;max&#125;&quot; step=&quot;&#123;step&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; /&gt;
-        &lt;/label&gt;
+                &#123;#if required&#125;
+                &lt;span
+                    aria-hidden=&quot;true&quot;
+                    class='text-[var(--wire-color-danger)]'
+                &gt;*&lt;/span&gt;
+                &#123;/if&#125;
+            &lt;/label&gt;
+            &#123;/if&#125;
+
+            &#123;#if description !== &quot;&quot; &amp;&amp; variant !== &quot;labeled&quot; &amp;&amp; variant !== &quot;seat&quot;&#125;
+            &lt;p
+                id='&#123;descriptionId()&#125;'
+                class='m-0 text-xs leading-5 text-[var(--wire-color-muted)]'
+            &gt;
+                &#123;description&#125;
+            &lt;/p&gt;
+            &#123;/if&#125;
+
+            &lt;div
+                class='group flex min-w-0 overflow-hidden border bg-[var(--wire-color-surface)] text-[var(--wire-color-text)] shadow-[var(--wire-shadow-1)] transition-[border-color,box-shadow,background-color] duration-[var(--wire-motion-base)] ease-[var(--wire-ease-standard)] focus-within:border-[var(--input-number-accent)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--input-number-accent)_18%,transparent)] &#123;variant === &quot;compact&quot; ? &quot;rounded-full&quot; : &quot;rounded-[var(--wire-radius-sm)]&quot;&#125; &#123;size === &quot;xs&quot; ? &quot;min-h-8 text-xs&quot; : size === &quot;sm&quot; ? &quot;min-h-9 text-sm&quot; : size === &quot;lg&quot; ? &quot;min-h-12 text-base&quot; : size === &quot;xl&quot; ? &quot;min-h-14 text-lg&quot; : &quot;min-h-10 text-sm&quot;&#125; &#123;isInvalid() ? &quot;border-[var(--wire-color-danger)] focus-within:border-[var(--wire-color-danger)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--wire-color-danger)_18%,transparent)]&quot; : &quot;border-[var(--wire-color-border)]&quot;&#125; &#123;disabled ? &quot;cursor-not-allowed bg-[var(--wire-color-surface-2)]&quot; : &quot;&quot;&#125;'
+            &gt;
+                &#123;#if variant === &quot;horizontal&quot; &amp;&amp; showButtons&#125;
+                &lt;button
+                    type=&quot;button&quot;
+                    aria-label='&#123;decrementLabel&#125;'
+                    aria-controls='&#123;inputId()&#125;'
+                    disabled='&#123;decrementDisabled()&#125;'
+                    @click='decrementValue(event)'
+                    class='inline-flex shrink-0 items-center justify-center border-r border-[var(--wire-color-border)] bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 &#123;size === &quot;xs&quot; ? &quot;w-8&quot; : size === &quot;sm&quot; ? &quot;w-9&quot; : size === &quot;lg&quot; ? &quot;w-12&quot; : size === &quot;xl&quot; ? &quot;w-14&quot; : &quot;w-10&quot;&#125;'
+                &gt;
+        &lt;span
+                        aria-hidden=&quot;true&quot;
+                        class='icon-[lucide--minus] size-4'
+                    &gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+                &#123;/if&#125;
+
+                &lt;div
+                    class='flex min-w-0 flex-1 &#123;variant === &quot;labeled&quot; ? &quot;flex-col items-stretch justify-center gap-0.5&quot; : variant === &quot;seat&quot; ? &quot;items-center justify-between gap-3&quot; : &quot;items-center&quot;&#125; &#123;size === &quot;xs&quot; ? &quot;px-2&quot; : size === &quot;sm&quot; ? &quot;px-2.5&quot; : size === &quot;lg&quot; ? &quot;px-4&quot; : size === &quot;xl&quot; ? &quot;px-5&quot; : &quot;px-3&quot;&#125;'
+                &gt;
+                    &#123;#if variant === &quot;labeled&quot; || variant === &quot;seat&quot;&#125;
+                    &lt;div class='min-w-0 flex-1'&gt;
+                        &#123;#if label !== &quot;&quot;&#125;
+                        &lt;label
+                            for='&#123;inputId()&#125;'
+                            class='block truncate font-semibold leading-4 text-[var(--wire-color-text)] &#123;variant === &quot;labeled&quot; ? &quot;text-xs font-medium text-[var(--wire-color-muted)]&quot; : &quot;text-sm&quot;&#125;'
+                        &gt;
+                            &#123;label&#125;
+                            &#123;#if required&#125;
+                            &lt;span
+                                aria-hidden=&quot;true&quot;
+                                class='ml-0.5 text-[var(--wire-color-danger)]'
+                            &gt;*&lt;/span&gt;
+                            &#123;/if&#125;
+                        &lt;/label&gt;
+                        &#123;/if&#125;
+
+                        &#123;#if description !== &quot;&quot;&#125;
+                        &lt;span
+                            id='&#123;descriptionId()&#125;'
+                            class='block truncate text-xs leading-4 text-[var(--wire-color-muted)]'
+                        &gt;
+                            &#123;description&#125;
+                        &lt;/span&gt;
+                        &#123;/if&#125;
+                    &lt;/div&gt;
+                    &#123;/if&#125;
+
+                    &lt;div
+                        class='flex min-w-0 items-center &#123;variant === &quot;seat&quot; ? &quot;w-auto shrink-0&quot; : &quot;w-full&quot;&#125;'
+                    &gt;
+                        &#123;#if prefix !== &quot;&quot;&#125;
+                        &lt;span
+                            aria-hidden=&quot;true&quot;
+                            class='shrink-0 pr-1.5 text-[var(--wire-color-muted)]'
+                        &gt;
+                            &#123;prefix&#125;
+                        &lt;/span&gt;
+                        &#123;/if&#125;
+
+                        &lt;input
+                            id='&#123;inputId()&#125;'
+                            name='&#123;name&#125;'
+                            type=&quot;number&quot;
+                            value='&#123;currentValue&#125;'
+                            min='&#123;min&#125;'
+                            max='&#123;max&#125;'
+                            step='&#123;normalizedStep()&#125;'
+                            placeholder='&#123;placeholder&#125;'
+                            autocomplete='&#123;autocomplete&#125;'
+                            inputmode='&#123;inputMode&#125;'
+                            aria-label='&#123;ariaLabel !== &quot;&quot; ? ariaLabel : label !== &quot;&quot; ? label : name&#125;'
+                            aria-describedby='&#123;describedBy()&#125;'
+                            aria-invalid='&#123;isInvalid() ? &quot;true&quot; : &quot;false&quot;&#125;'
+                            aria-required='&#123;required ? &quot;true&quot; : &quot;false&quot;&#125;'
+                            aria-disabled='&#123;disabled || inputDisabled ? &quot;true&quot; : &quot;false&quot;&#125;'
+                            required='&#123;required&#125;'
+                            disabled='&#123;disabled&#125;'
+                            readonly='&#123;readonly || inputDisabled || !allowInput&#125;'
+                            tabindex='&#123;inputDisabled ? &quot;-1&quot; : &quot;0&quot;&#125;'
+                            @input='handleInput(event)'
+                            @change='handleChange(event)'
+                            @keydown='handleKeydown(event)'
+                            @wheel='handleWheel(event)'
+                            class='min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-medium leading-none text-[var(--wire-color-text)] outline-none placeholder:text-[var(--wire-color-muted)] read-only:cursor-default disabled:cursor-not-allowed [&amp;::-webkit-inner-spin-button]:appearance-none [&amp;::-webkit-outer-spin-button]:appearance-none &#123;variant === &quot;horizontal&quot; || variant === &quot;compact&quot; || variant === &quot;seat&quot; ? &quot;text-center&quot; : &quot;text-left&quot;&#125; &#123;variant === &quot;seat&quot; ? &quot;w-10 flex-none&quot; : &quot;w-full&quot;&#125;'
+                        /&gt;
+
+                        &#123;#if suffix !== &quot;&quot;&#125;
+                        &lt;span
+                            aria-hidden=&quot;true&quot;
+                            class='shrink-0 pl-1.5 text-[var(--wire-color-muted)]'
+                        &gt;
+                            &#123;suffix&#125;
+                        &lt;/span&gt;
+                        &#123;/if&#125;
+                    &lt;/div&gt;
+        &lt;/div&gt;
+
+                &#123;#if variant === &quot;horizontal&quot; &amp;&amp; showButtons&#125;
+                &lt;button
+                    type=&quot;button&quot;
+                    aria-label='&#123;incrementLabel&#125;'
+                    aria-controls='&#123;inputId()&#125;'
+                    disabled='&#123;incrementDisabled()&#125;'
+                    @click='incrementValue(event)'
+                    class='inline-flex shrink-0 items-center justify-center border-l border-[var(--wire-color-border)] bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 &#123;size === &quot;xs&quot; ? &quot;w-8&quot; : size === &quot;sm&quot; ? &quot;w-9&quot; : size === &quot;lg&quot; ? &quot;w-12&quot; : size === &quot;xl&quot; ? &quot;w-14&quot; : &quot;w-10&quot;&#125;'
+                &gt;
+        &lt;span
+                        aria-hidden=&quot;true&quot;
+                        class='icon-[lucide--plus] size-4'
+                    &gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+                &#123;:else&#125;
+                &#123;#if showButtons&#125;
+                &lt;div
+                    role=&quot;group&quot;
+                    aria-label='&#123;controlsLabel&#125;'
+                    class='flex shrink-0 border-l border-[var(--wire-color-border)] &#123;variant === &quot;vertical&quot; ? &quot;flex-col&quot; : &quot;flex-row&quot;&#125;'
+                &gt;
+        &lt;button
+                        type=&quot;button&quot;
+                        aria-label='&#123;decrementLabel&#125;'
+                        aria-controls='&#123;inputId()&#125;'
+                        disabled='&#123;decrementDisabled()&#125;'
+                        @click='decrementValue(event)'
+                        class='inline-flex items-center justify-center bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 &#123;variant === &quot;vertical&quot; ? &quot;flex-1 border-b border-[var(--wire-color-border)]&quot; : &quot;border-r border-[var(--wire-color-border)]&quot;&#125; &#123;size === &quot;xs&quot; ? &quot;w-8&quot; : size === &quot;sm&quot; ? &quot;w-9&quot; : size === &quot;lg&quot; ? &quot;w-12&quot; : size === &quot;xl&quot; ? &quot;w-14&quot; : &quot;w-10&quot;&#125;'
+                    &gt;
+        &lt;span
+                            aria-hidden=&quot;true&quot;
+                            class='icon-[lucide--minus] size-4'
+                        &gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button
+                        type=&quot;button&quot;
+                        aria-label='&#123;incrementLabel&#125;'
+                        aria-controls='&#123;inputId()&#125;'
+                        disabled='&#123;incrementDisabled()&#125;'
+                        @click='incrementValue(event)'
+                        class='inline-flex items-center justify-center bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 &#123;variant === &quot;vertical&quot; ? &quot;flex-1&quot; : &quot;&quot;&#125; &#123;size === &quot;xs&quot; ? &quot;w-8&quot; : size === &quot;sm&quot; ? &quot;w-9&quot; : size === &quot;lg&quot; ? &quot;w-12&quot; : size === &quot;xl&quot; ? &quot;w-14&quot; : &quot;w-10&quot;&#125;'
+                    &gt;
+        &lt;span
+                            aria-hidden=&quot;true&quot;
+                            class='icon-[lucide--plus] size-4'
+                        &gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+        &lt;/div&gt;
+                &#123;/if&#125;
+                &#123;/if&#125;
+            &lt;/div&gt;
+
+            &#123;#if showValidationMessage &amp;&amp; isInvalid() &amp;&amp; validationMessage() !== &quot;&quot;&#125;
+            &lt;p
+                id='&#123;messageId()&#125;'
+                role=&quot;alert&quot;
+                aria-live=&quot;polite&quot;
+                class='m-0 flex items-center gap-1.5 text-xs leading-5 text-[var(--wire-color-danger)]'
+            &gt;
+        &lt;span
+                    aria-hidden=&quot;true&quot;
+                    class='icon-[lucide--circle-alert] size-3.5 shrink-0'
+                &gt;
+        &lt;/span&gt;
+        &lt;span&gt;&#123;validationMessage()&#125;&lt;/span&gt;
+        &lt;/p&gt;
+            &#123;/if&#125;
+
+            &#123;#if (!showValidationMessage || !isInvalid() || validationMessage() === &quot;&quot;) &amp;&amp; helpText !== &quot;&quot;&#125;
+            &lt;p
+                id='&#123;messageId()&#125;'
+                class='m-0 text-xs leading-5 text-[var(--wire-color-muted)]'
+            &gt;
+                &#123;helpText&#125;
+            &lt;/p&gt;
+            &#123;/if&#125;
+        &lt;/div&gt;
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/input.wrn

@@ -10,16 +10,16 @@ page Inputcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Input</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Input</h1><p>Theme-aware, responsive input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Input
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Input</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Input</h1><p>Theme-aware, responsive input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Input
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Input&quot;
   name=&quot;name&quot;
   value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Input&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Input&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Input.wrn</code></p><pre data-language="wrn"><code>component Input &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Input&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Input&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/input.wrn</code></p><pre data-language="wrn"><code>component Input &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -43,7 +43,7 @@ page Inputcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/kbd.wrn

@@ -10,10 +10,10 @@ page Kbdcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Kbd</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Kbd</h1><p>Theme-aware, responsive kbd component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Kbd
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Kbd</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Kbd</h1><p>Theme-aware, responsive kbd component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Kbd
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;⌘ K&quot;
@@ -31,7 +31,7 @@ page Kbdcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/layout-splitter.wrn

@@ -10,10 +10,10 @@ page LayoutSplittercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LayoutSplitter</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LayoutSplitter</h1><p>Theme-aware, responsive layout splitter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LayoutSplitter
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LayoutSplitter</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LayoutSplitter</h1><p>Theme-aware, responsive layout splitter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LayoutSplitter
   size=&quot;default&quot;
   color=&quot;primary&quot;
   columns=&quot;2&quot;
@@ -35,7 +35,7 @@ page LayoutSplittercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/legend-indicator.wrn

@@ -10,10 +10,10 @@ page LegendIndicatorcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegendIndicator</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>LegendIndicator</h1><p>Theme-aware, responsive legend indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegendIndicator
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegendIndicator</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>LegendIndicator</h1><p>Theme-aware, responsive legend indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegendIndicator
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Legend Indicator&quot;
@@ -39,7 +39,7 @@ page LegendIndicatorcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/link.wrn

@@ -10,10 +10,10 @@ page Linkcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Link</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Link</h1><p>Theme-aware, responsive link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Link
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Link</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Link</h1><p>Theme-aware, responsive link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Link
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Link&quot;
@@ -36,7 +36,7 @@ page Linkcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/list-group.wrn

@@ -10,10 +10,10 @@ page ListGroupcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ListGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ListGroup</h1><p>Theme-aware, responsive list group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ListGroup
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ListGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ListGroup</h1><p>Theme-aware, responsive list group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ListGroup
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;List Group&quot;
@@ -39,7 +39,7 @@ page ListGroupcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/list.wrn

@@ -10,10 +10,10 @@ page Listcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">List</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>List</h1><p>Theme-aware, responsive list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;List
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">List</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>List</h1><p>Theme-aware, responsive list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;List
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;List&quot;
@@ -39,7 +39,7 @@ page Listcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/map.wrn

@@ -10,10 +10,10 @@ page Mapcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Map</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Map</h1><p>Theme-aware, responsive map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Map
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Map</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Map</h1><p>Theme-aware, responsive map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Map
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Map&quot;
@@ -39,7 +39,7 @@ page Mapcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/marquee.wrn

@@ -10,10 +10,10 @@ page Marqueecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Marquee</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Marquee</h1><p>Theme-aware, responsive marquee component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Marquee
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Marquee</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Marquee</h1><p>Theme-aware, responsive marquee component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Marquee
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Marquee&quot;
@@ -39,7 +39,7 @@ page Marqueecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/mega-menu.wrn

@@ -10,10 +10,10 @@ page MegaMenucomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>MegaMenu</h1><p>Theme-aware, responsive mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MegaMenu
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>MegaMenu</h1><p>Theme-aware, responsive mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MegaMenu
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Mega Menu&quot;
@@ -37,7 +37,7 @@ page MegaMenucomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/modal.wrn

@@ -10,10 +10,10 @@ page Modalcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Modal</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Modal</h1><p>Theme-aware, responsive modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Modal
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Modal</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Modal</h1><p>Theme-aware, responsive modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Modal
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Modal&quot;
@@ -42,7 +42,7 @@ page Modalcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/nav.wrn

@@ -10,10 +10,10 @@ page Navcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Nav</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Nav</h1><p>Theme-aware, responsive nav component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Nav
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Nav</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Nav</h1><p>Theme-aware, responsive nav component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Nav
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Nav&quot;
@@ -37,7 +37,7 @@ page Navcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/navbar.wrn

@@ -10,10 +10,10 @@ page Navbarcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Navbar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Navbar</h1><p>Theme-aware, responsive navbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Navbar
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Navbar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Navbar</h1><p>Theme-aware, responsive navbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Navbar
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Navbar&quot;
@@ -37,7 +37,7 @@ page Navbarcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/pagination.wrn

@@ -10,10 +10,10 @@ page Paginationcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Pagination</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Pagination</h1><p>Theme-aware, responsive pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Pagination
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Pagination</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Pagination</h1><p>Theme-aware, responsive pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Pagination
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Pagination&quot;
@@ -37,7 +37,7 @@ page Paginationcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/pin-input.wrn

@@ -10,10 +10,10 @@ page PinInputcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PinInput</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>PinInput</h1><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>26 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PinInput
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PinInput</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>PinInput</h1><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>26 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PinInput
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Verification code&quot;
@@ -133,7 +133,7 @@ page PinInputcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/popover.wrn

@@ -10,10 +10,10 @@ page Popovercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Popover</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Popover</h1><p>Theme-aware, responsive popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Popover
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Popover</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Popover</h1><p>Theme-aware, responsive popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Popover
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Popover&quot;
@@ -42,7 +42,7 @@ page Popovercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/progress.wrn

@@ -10,16 +10,16 @@ page Progresscomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Progress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Progress</h1><p>Theme-aware, responsive progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Progress
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Progress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Progress</h1><p>Theme-aware, responsive progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Progress
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Progress&quot;
   value=&quot;50&quot;
   max=&quot;100&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Progress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Progress&quot;</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Progress.wrn</code></p><pre data-language="wrn"><code>component Progress &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Progress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Progress&quot;</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/progress.wrn</code></p><pre data-language="wrn"><code>component Progress &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -39,7 +39,7 @@ page Progresscomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/radio.wrn

@@ -10,16 +10,16 @@ page Radiocomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Radio</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Radio</h1><p>Theme-aware, responsive radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Radio
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Radio</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Radio</h1><p>Theme-aware, responsive radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Radio
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Radio&quot;
   name=&quot;name&quot;
   value=&quot;on&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Radio&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Radio&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Radio.wrn</code></p><pre data-language="wrn"><code>component Radio &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Radio&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Radio&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/radio.wrn</code></p><pre data-language="wrn"><code>component Radio &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -38,7 +38,7 @@ page Radiocomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/range-slider.wrn

@@ -10,10 +10,10 @@ page RangeSlidercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RangeSlider</h1><p>Theme-aware, responsive range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RangeSlider
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RangeSlider</h1><p>Theme-aware, responsive range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RangeSlider
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Range Slider&quot;
@@ -43,7 +43,7 @@ page RangeSlidercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/rating.wrn

@@ -10,10 +10,10 @@ page Ratingcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Rating</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Rating</h1><p>Theme-aware, responsive rating component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Rating
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Rating</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Rating</h1><p>Theme-aware, responsive rating component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Rating
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Rating&quot;
@@ -39,7 +39,7 @@ page Ratingcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/scrollspy.wrn

@@ -10,10 +10,10 @@ page Scrollspycomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Scrollspy</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Scrollspy</h1><p>Theme-aware, responsive scrollspy component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Scrollspy
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Scrollspy</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Scrollspy</h1><p>Theme-aware, responsive scrollspy component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Scrollspy
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Scrollspy&quot;
@@ -37,7 +37,7 @@ page Scrollspycomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/search-box.wrn

@@ -10,10 +10,10 @@ page SearchBoxcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>SearchBox</h1><p>Theme-aware, responsive search box component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchBox
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>SearchBox</h1><p>Theme-aware, responsive search box component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchBox
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Search Box&quot;
@@ -43,7 +43,7 @@ page SearchBoxcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/select.wrn

@@ -10,16 +10,16 @@ page Selectcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Select</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Select</h1><p>Theme-aware, responsive select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Select
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Select</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Select</h1><p>Theme-aware, responsive select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Select
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Select&quot;
   name=&quot;name&quot;
   value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Select&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Select&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Select an option&quot;</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Select.wrn</code></p><pre data-language="wrn"><code>component Select &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Select&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Select&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Select an option&quot;</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/select.wrn</code></p><pre data-language="wrn"><code>component Select &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -41,7 +41,7 @@ page Selectcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/sidebar.wrn

@@ -10,10 +10,10 @@ page Sidebarcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Sidebar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Sidebar</h1><p>Theme-aware, responsive sidebar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Sidebar
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Sidebar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Sidebar</h1><p>Theme-aware, responsive sidebar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Sidebar
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Sidebar&quot;
@@ -37,7 +37,7 @@ page Sidebarcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/skeleton.wrn

@@ -10,15 +10,15 @@ page Skeletoncomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Skeleton</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Skeleton</h1><p>Theme-aware, responsive skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Skeleton
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Skeleton</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Skeleton</h1><p>Theme-aware, responsive skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Skeleton
   color=&quot;primary&quot;
   label=&quot;Loading&quot;
   size=&quot;md&quot;
   lines=&quot;3&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Skeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>lines</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Skeleton.wrn</code></p><pre data-language="wrn"><code>component Skeleton &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Skeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>lines</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/skeleton.wrn</code></p><pre data-language="wrn"><code>component Skeleton &#123;
   props &#123;
     color = &quot;primary&quot;
     label = &quot;Loading&quot;
@@ -35,7 +35,7 @@ page Skeletoncomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/spinner.wrn

@@ -10,15 +10,15 @@ page Spinnercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Spinner</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Spinner</h1><p>Theme-aware, responsive spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Spinner
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Spinner</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Spinner</h1><p>Theme-aware, responsive spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Spinner
   color=&quot;primary&quot;
   label=&quot;Loading&quot;
   size=&quot;md&quot;
   lines=&quot;3&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Spinner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>lines</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Spinner.wrn</code></p><pre data-language="wrn"><code>component Spinner &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Spinner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>lines</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/spinner.wrn</code></p><pre data-language="wrn"><code>component Spinner &#123;
   props &#123;
     color = &quot;primary&quot;
     label = &quot;Loading&quot;
@@ -35,7 +35,7 @@ page Spinnercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/stepper.wrn

@@ -10,10 +10,10 @@ page Steppercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Stepper</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Stepper</h1><p>Theme-aware, responsive stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Stepper
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Stepper</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Stepper</h1><p>Theme-aware, responsive stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Stepper
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Stepper&quot;
@@ -37,7 +37,7 @@ page Steppercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/strong-password.wrn

@@ -10,10 +10,10 @@ page StrongPasswordcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StrongPassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>StrongPassword</h1><p>Theme-aware, responsive strong password component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>27 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StrongPassword
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StrongPassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>StrongPassword</h1><p>Theme-aware, responsive strong password component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>27 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StrongPassword
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Password&quot;
@@ -257,7 +257,7 @@ page StrongPasswordcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/styled-icon.wrn

@@ -10,10 +10,10 @@ page StyledIconcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StyledIcon</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>StyledIcon</h1><p>Theme-aware, responsive styled icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StyledIcon
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StyledIcon</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>StyledIcon</h1><p>Theme-aware, responsive styled icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StyledIcon
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Styled Icon&quot;
@@ -39,7 +39,7 @@ page StyledIconcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/switch.wrn

@@ -10,16 +10,16 @@ page Switchcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Switch</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Switch</h1><p>Theme-aware, responsive switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Switch
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Switch</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Switch</h1><p>Theme-aware, responsive switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Switch
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Switch&quot;
   name=&quot;name&quot;
   value=&quot;on&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Switch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Switch&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Switch.wrn</code></p><pre data-language="wrn"><code>component Switch &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Switch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Switch&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/switch.wrn</code></p><pre data-language="wrn"><code>component Switch &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -38,7 +38,7 @@ page Switchcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/table.wrn

@@ -10,16 +10,16 @@ page Tablecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Table</span></nav><section class="doc-intro"><span class="eyebrow">tables component</span><h1>Table</h1><p>Theme-aware, responsive table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Table
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Table</span></nav><section class="doc-intro"><span class="eyebrow">tables component</span><h1>Table</h1><p>Theme-aware, responsive table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Table
   size=&quot;default&quot;
   color=&quot;primary&quot;
   caption=&quot;Table&quot;
   columns=&quot;[]&quot;
   rows=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Table&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Table&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Table.wrn</code></p><pre data-language="wrn"><code>component Table &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Table&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Table&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/table.wrn</code></p><pre data-language="wrn"><code>component Table &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -43,7 +43,7 @@ page Tablecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/tabs.wrn

@@ -10,10 +10,10 @@ page Tabscomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tabs</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Tabs</h1><p>Theme-aware, responsive tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Tabs
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tabs</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Tabs</h1><p>Theme-aware, responsive tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Tabs
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Tabs&quot;
@@ -37,7 +37,7 @@ page Tabscomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/textarea.wrn

@@ -10,16 +10,16 @@ page Textareacomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Textarea</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Textarea</h1><p>Theme-aware, responsive textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Textarea
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Textarea</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Textarea</h1><p>Theme-aware, responsive textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Textarea
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Textarea&quot;
   name=&quot;name&quot;
   value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Textarea&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Textarea&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rows</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Textarea.wrn</code></p><pre data-language="wrn"><code>component Textarea &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Textarea&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Textarea&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rows</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/textarea.wrn</code></p><pre data-language="wrn"><code>component Textarea &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -40,7 +40,7 @@ page Textareacomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/time-picker.wrn

@@ -10,10 +10,10 @@ page TimePickercomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimePicker</h1><p>Theme-aware, responsive time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimePicker
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimePicker</h1><p>Theme-aware, responsive time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimePicker
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Time Picker&quot;
@@ -43,7 +43,7 @@ page TimePickercomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/timeline.wrn

@@ -10,10 +10,10 @@ page Timelinecomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Timeline</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Timeline</h1><p>Theme-aware, responsive timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Timeline
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Timeline</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Timeline</h1><p>Theme-aware, responsive timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Timeline
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Timeline&quot;
@@ -39,7 +39,7 @@ page Timelinecomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/toast-notifications.wrn

@@ -10,10 +10,10 @@ page ToastNotificationscomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastNotifications</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>ToastNotifications</h1><p>Theme-aware, responsive toast notifications component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToastNotifications
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastNotifications</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>ToastNotifications</h1><p>Theme-aware, responsive toast notifications component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToastNotifications
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Toast Notifications&quot;
@@ -39,7 +39,7 @@ page ToastNotificationscomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/toast.wrn

@@ -10,10 +10,10 @@ page Toastcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Toast</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Toast</h1><p>Theme-aware, responsive toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Toast
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Toast</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Toast</h1><p>Theme-aware, responsive toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Toast
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Toast&quot;
@@ -39,7 +39,7 @@ page Toastcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/toggle-count.wrn

@@ -10,10 +10,10 @@ page ToggleCountcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToggleCount</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ToggleCount</h1><p>Theme-aware, responsive toggle count component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToggleCount
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToggleCount</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ToggleCount</h1><p>Theme-aware, responsive toggle count component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToggleCount
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Toggle Count&quot;
@@ -43,7 +43,7 @@ page ToggleCountcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/toggle-password.wrn

@@ -10,10 +10,10 @@ page TogglePasswordcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TogglePassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>TogglePassword</h1><p>Accessible password field with optional show and hide controls.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>24 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TogglePassword
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TogglePassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>TogglePassword</h1><p>Accessible password field with optional show and hide controls.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>24 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TogglePassword
   size=&quot;default&quot;
   color=&quot;primary&quot;
   label=&quot;Password&quot;
@@ -175,7 +175,7 @@ page TogglePasswordcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/tooltip.wrn

@@ -10,16 +10,16 @@ page Tooltipcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tooltip</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Tooltip</h1><p>Theme-aware, responsive tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Tooltip
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tooltip</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Tooltip</h1><p>Theme-aware, responsive tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Tooltip
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Tooltip&quot;
   description=&quot;description&quot;
   open=&quot;false&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Tooltip&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tooltip&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&quot;</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Tooltip.wrn</code></p><pre data-language="wrn"><code>component Tooltip &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Tooltip&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tooltip&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&quot;</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/tooltip.wrn</code></p><pre data-language="wrn"><code>component Tooltip &#123;
   props &#123;
     size = &quot;default&quot;
     color = &quot;primary&quot;
@@ -42,7 +42,7 @@ page Tooltipcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/tree-view.wrn

@@ -10,10 +10,10 @@ page TreeViewcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TreeView</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>TreeView</h1><p>Theme-aware, responsive tree view component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TreeView
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TreeView</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>TreeView</h1><p>Theme-aware, responsive tree view component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TreeView
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Tree View&quot;
@@ -39,7 +39,7 @@ page TreeViewcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/typography.wrn

@@ -10,10 +10,10 @@ page Typographycomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Typography</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Typography</h1><p>Theme-aware, responsive typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Typography
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Typography</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Typography</h1><p>Theme-aware, responsive typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Typography
   size=&quot;default&quot;
   color=&quot;primary&quot;
   columns=&quot;2&quot;
@@ -35,7 +35,7 @@ page Typographycomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }

app/pages/components/wysiwyg-editor.wrn

@@ -10,10 +10,10 @@ page WysiwygEditorcomponent {
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
         <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.6</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WysiwygEditor</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>WysiwygEditor</h1><p>Theme-aware, responsive wysiwyg editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.6</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WysiwygEditor
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WysiwygEditor</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>WysiwygEditor</h1><p>Theme-aware, responsive wysiwyg editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WysiwygEditor
   size=&quot;default&quot;
   color=&quot;primary&quot;
   title=&quot;Wysiwyg Editor&quot;
@@ -39,7 +39,7 @@ page WysiwygEditorcomponent {
     &#125;
 &#125;
 </code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.6</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
     </div>
   }