From e96a0f60e54c1218e9d2c3eed6e6473c9e783c0e Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Fri, 24 Jul 2026 15:22:40 +0530
Subject: [PATCH] New changes

---
 app/pages/components.wrn                      | 993 ++----------------
 app/pages/components/accordion.wrn            |  57 +-
 app/pages/components/advanced-date-picker.wrn |  46 +
 .../components/advanced-range-slider.wrn      |  46 +
 app/pages/components/advanced-select.wrn      | 493 +++++++++
 app/pages/components/alert.wrn                |  54 +-
 app/pages/components/avatar-group.wrn         |  50 +-
 app/pages/components/avatar.wrn               |  39 +-
 app/pages/components/badge.wrn                |  54 +-
 app/pages/components/blockquote.wrn           |  46 +
 app/pages/components/breadcrumb.wrn           |  44 +
 app/pages/components/button-group.wrn         |  50 +-
 app/pages/components/button.wrn               | 186 +++-
 app/pages/components/card.wrn                 |  40 +-
 app/pages/components/carousel.wrn             |  36 +-
 app/pages/components/chart.wrn                |  46 +
 app/pages/components/chat-bubble.wrn          |  46 +
 app/pages/components/checkbox.wrn             |  36 +-
 app/pages/components/clipboard.wrn            |  46 +
 app/pages/components/collapse.wrn             |  44 +
 app/pages/components/color-picker.wrn         |  40 +-
 app/pages/components/columns.wrn              |  42 +
 app/pages/components/combo-box.wrn            | 420 ++++++++
 app/pages/components/confetti.wrn             |  46 +
 app/pages/components/container.wrn            |  22 +-
 app/pages/components/context-menu.wrn         |  32 +-
 app/pages/components/copy-markup.wrn          |  50 +
 app/pages/components/custom-scrollbar.wrn     |  42 +
 app/pages/components/data-map.wrn             |  46 +
 app/pages/components/data-table.wrn           |  36 +-
 app/pages/components/date-picker.wrn          |  42 +-
 app/pages/components/device-frame.wrn         |  46 +
 app/pages/components/divider.wrn              |  23 +-
 app/pages/components/drag-and-drop.wrn        |  46 +
 app/pages/components/drawer.wrn               |  44 +-
 app/pages/components/dropdown.wrn             |  49 +
 app/pages/components/file-input.wrn           |  40 +-
 app/pages/components/file-upload-progress.wrn |  46 +
 app/pages/components/file-upload.wrn          |  44 +-
 app/pages/components/grid.wrn                 |  26 +-
 app/pages/components/image.wrn                |  46 +
 app/pages/components/input-group.wrn          |  38 +-
 app/pages/components/input-number.wrn         |  50 +
 app/pages/components/input.wrn                |  35 +-
 app/pages/components/kbd.wrn                  |  38 +
 app/pages/components/layout-splitter.wrn      |  42 +
 app/pages/components/legend-indicator.wrn     |  46 +
 app/pages/components/link.wrn                 |  28 +-
 app/pages/components/list-group.wrn           |  46 +
 app/pages/components/list.wrn                 |  39 +-
 app/pages/components/map.wrn                  |  46 +
 app/pages/components/marquee.wrn              |  46 +
 app/pages/components/mega-menu.wrn            |  40 +-
 app/pages/components/modal.wrn                |  45 +-
 app/pages/components/nav.wrn                  |  44 +
 app/pages/components/navbar.wrn               |  44 +
 app/pages/components/pagination.wrn           | 208 +---
 app/pages/components/pin-input.wrn            | 132 ++-
 app/pages/components/popover.wrn              |  32 +-
 app/pages/components/progress.wrn             |  32 +-
 app/pages/components/radio.wrn                |  41 +-
 app/pages/components/range-slider.wrn         |  44 +-
 app/pages/components/rating.wrn               |  46 +
 app/pages/components/scrollspy.wrn            |  44 +
 app/pages/components/search-box.wrn           |  50 +
 app/pages/components/select.wrn               |  44 +-
 app/pages/components/sidebar.wrn              |  44 +
 app/pages/components/skeleton.wrn             |  31 +-
 app/pages/components/spinner.wrn              |  23 +-
 app/pages/components/stepper.wrn              |  38 +-
 app/pages/components/strong-password.wrn      | 264 +++++
 app/pages/components/styled-icon.wrn          |  46 +
 app/pages/components/switch.wrn               |  43 +-
 app/pages/components/table.wrn                |  49 +-
 app/pages/components/tabs.wrn                 |  40 +-
 app/pages/components/textarea.wrn             |  36 +-
 app/pages/components/time-picker.wrn          |  39 +-
 app/pages/components/timeline.wrn             |  31 +-
 app/pages/components/toast-notifications.wrn  |  46 +
 app/pages/components/toast.wrn                |  42 +-
 app/pages/components/toggle-count.wrn         |  50 +
 app/pages/components/toggle-password.wrn      | 182 ++++
 app/pages/components/tooltip.wrn              |  38 +-
 app/pages/components/tree-view.wrn            |  46 +
 app/pages/components/typography.wrn           |  30 +-
 app/pages/components/wysiwyg-editor.wrn       |  46 +
 app/pages/packages.wrn                        |   6 +-
 app/pages/packages/ai.wrn                     |   6 +-
 app/pages/packages/authz.wrn                  |   6 +-
 app/pages/packages/cli.wrn                    |   6 +-
 app/pages/packages/compiler.wrn               |   9 +-
 app/pages/packages/core.wrn                   |   6 +-
 app/pages/packages/csr.wrn                    |   6 +-
 app/pages/packages/db.wrn                     |   6 +-
 app/pages/packages/dev-server.wrn             |   6 +-
 app/pages/packages/encryption.wrn             |   6 +-
 app/pages/packages/helpers.wrn                |   6 +-
 app/pages/packages/i18n.wrn                   |   6 +-
 app/pages/packages/jwt.wrn                    |   6 +-
 app/pages/packages/mobile.wrn                 |   6 +-
 app/pages/packages/native.wrn                 |   6 +-
 app/pages/packages/oauth.wrn                  |   6 +-
 app/pages/packages/pubsub.wrn                 |   6 +-
 app/pages/packages/queue.wrn                  |   6 +-
 app/pages/packages/reactive.wrn               |   6 +-
 app/pages/packages/router.wrn                 |   6 +-
 app/pages/packages/ssr.wrn                    |  12 +-
 app/pages/packages/styles.wrn                 |   6 +-
 app/pages/packages/test.wrn                   |   6 +-
 app/pages/packages/tracking.wrn               |   6 +-
 app/pages/packages/ui.wrn                     |   8 +-
 app/pages/packages/uploader.wrn               |   6 +-
 app/pages/packages/validation.wrn             |   6 +-
 bun.lock                                      | 116 +-
 package-lock.json                             | 312 +++---
 package.json                                  |  60 +-
 scripts/generate-docs.ts                      |  16 +-
 117 files changed, 4562 insertions(+), 2259 deletions(-)
 create mode 100644 app/pages/components/advanced-date-picker.wrn
 create mode 100644 app/pages/components/advanced-range-slider.wrn
 create mode 100644 app/pages/components/advanced-select.wrn
 create mode 100644 app/pages/components/blockquote.wrn
 create mode 100644 app/pages/components/breadcrumb.wrn
 create mode 100644 app/pages/components/chart.wrn
 create mode 100644 app/pages/components/chat-bubble.wrn
 create mode 100644 app/pages/components/clipboard.wrn
 create mode 100644 app/pages/components/collapse.wrn
 create mode 100644 app/pages/components/columns.wrn
 create mode 100644 app/pages/components/combo-box.wrn
 create mode 100644 app/pages/components/confetti.wrn
 create mode 100644 app/pages/components/copy-markup.wrn
 create mode 100644 app/pages/components/custom-scrollbar.wrn
 create mode 100644 app/pages/components/data-map.wrn
 create mode 100644 app/pages/components/device-frame.wrn
 create mode 100644 app/pages/components/drag-and-drop.wrn
 create mode 100644 app/pages/components/dropdown.wrn
 create mode 100644 app/pages/components/file-upload-progress.wrn
 create mode 100644 app/pages/components/image.wrn
 create mode 100644 app/pages/components/input-number.wrn
 create mode 100644 app/pages/components/kbd.wrn
 create mode 100644 app/pages/components/layout-splitter.wrn
 create mode 100644 app/pages/components/legend-indicator.wrn
 create mode 100644 app/pages/components/list-group.wrn
 create mode 100644 app/pages/components/map.wrn
 create mode 100644 app/pages/components/marquee.wrn
 create mode 100644 app/pages/components/nav.wrn
 create mode 100644 app/pages/components/navbar.wrn
 create mode 100644 app/pages/components/rating.wrn
 create mode 100644 app/pages/components/scrollspy.wrn
 create mode 100644 app/pages/components/search-box.wrn
 create mode 100644 app/pages/components/sidebar.wrn
 create mode 100644 app/pages/components/strong-password.wrn
 create mode 100644 app/pages/components/styled-icon.wrn
 create mode 100644 app/pages/components/toast-notifications.wrn
 create mode 100644 app/pages/components/toggle-count.wrn
 create mode 100644 app/pages/components/toggle-password.wrn
 create mode 100644 app/pages/components/tree-view.wrn
 create mode 100644 app/pages/components/wysiwyg-editor.wrn

diff --git a/app/pages/components.wrn b/app/pages/components.wrn
index 7327e9af..9bf0451c 100644
--- a/app/pages/components.wrn
+++ b/app/pages/components.wrn
@@ -1,7 +1,7 @@
 page Components {
   seo {
     title = "Components"
-    description = "Browse all 902 themeable WRNexusJS UI components, props, slots, events, and examples."
+    description = "Browse all 85 themeable WRNexusJS UI components, props, slots, events, and examples."
   }
   state query = ""
   state category = "All"
@@ -12,912 +12,95 @@ page Components {
       <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.4</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.3.5</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 id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 902 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>902</span></button><button type="button" @click="category = 'actions'">Actions<span>64</span></button><button type="button" @click="category = 'content'">Content<span>254</span></button><button type="button" @click="category = 'core'">Core<span>70</span></button><button type="button" @click="category = 'data'">Data<span>79</span></button><button type="button" @click="category = 'feedback'">Feedback<span>71</span></button><button type="button" @click="category = 'forms'">Forms<span>211</span></button><button type="button" @click="category = 'layout'">Layout<span>74</span></button><button type="button" @click="category = 'overlays'">Overlays<span>33</span></button><button type="button" @click="category = 'visualization'">Visualization<span>46</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accept-all-cookies-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'acceptallcookiesbutton acceptallcookiesbutton actions reusable accept all cookies button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>AcceptAllCookiesButton</h2><p>Reusable accept all cookies button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-accordion" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleaccordion accessibleaccordion content reusable accessible accordion component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleAccordion</h2><p>Reusable accessible accordion component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessiblecarousel accessiblecarousel content reusable accessible carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleCarousel</h2><p>Reusable accessible carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-chart-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessiblechartsummary accessiblechartsummary content reusable accessible chart summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleChartSummary</h2><p>Reusable accessible chart summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accessibledialog accessibledialog overlays reusable accessible dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccessibleDialog</h2><p>Reusable accessible dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-error-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleerrorsummary accessibleerrorsummary content reusable accessible error summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleErrorSummary</h2><p>Reusable accessible error summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleicon accessibleicon content reusable accessible icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleIcon</h2><p>Reusable accessible icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accessiblemenu accessiblemenu overlays reusable accessible menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccessibleMenu</h2><p>Reusable accessible menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibletabs accessibletabs content reusable accessible tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleTabs</h2><p>Reusable accessible tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accessible-tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibletooltip accessibletooltip content reusable accessible tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleTooltip</h2><p>Reusable accessible tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accordion accordion content reusable accordion component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Accordion</h2><p>Reusable accordion component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/account-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accountmenu accountmenu overlays reusable account menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccountMenu</h2><p>Reusable account menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/account-status-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'accountstatusbanner accountstatusbanner feedback reusable account status banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>AccountStatusBanner</h2><p>Reusable account status banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/action-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'actionmenu actionmenu overlays reusable action menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ActionMenu</h2><p>Reusable action menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/active-filter-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'activefilterlist activefilterlist data reusable active filter list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ActiveFilterList</h2><p>Reusable active filter list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/activity-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'activitylist activitylist data reusable activity list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ActivityList</h2><p>Reusable activity list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/add-on-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'addoncard addoncard content reusable add on card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AddOnCard</h2><p>Reusable add on card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'addressinput addressinput forms reusable address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AddressInput</h2><p>Reusable address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/address-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'addresspreview addresspreview content reusable address preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AddressPreview</h2><p>Reusable address preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/advanced-filter-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'advancedfilterbuilder advancedfilterbuilder content reusable advanced filter builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AdvancedFilterBuilder</h2><p>Reusable advanced filter builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'alert alert core reusable alert component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>alert</h2><p>Reusable alert component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/alert-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'alertdialog alertdialog overlays reusable alert dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AlertDialog</h2><p>Reusable alert dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/amount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'amountinput amountinput forms reusable amount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AmountInput</h2><p>Reusable amount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/analytics-dashboard-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'analyticsdashboardpreview analyticsdashboardpreview content reusable analytics dashboard preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AnalyticsDashboardPreview</h2><p>Reusable analytics dashboard preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/anchor-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'anchornavigation anchornavigation layout reusable anchor navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>AnchorNavigation</h2><p>Reusable anchor navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/announcement-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'announcementbar announcementbar core reusable announcement bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>AnnouncementBar</h2><p>Reusable announcement bar component.</p><div class="component-card-meta"><span>14 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/apartment-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'apartmentinput apartmentinput forms reusable apartment input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ApartmentInput</h2><p>Reusable apartment input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-authentication-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiauthenticationnotice apiauthenticationnotice feedback reusable api authentication notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiAuthenticationNotice</h2><p>Reusable api authentication notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-endpoint-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apiendpointcard apiendpointcard content reusable api endpoint card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiEndpointCard</h2><p>Reusable api endpoint card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-error-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apierrorexample apierrorexample content reusable api error example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiErrorExample</h2><p>Reusable api error example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-header-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apiheadertable apiheadertable data reusable api header table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiHeaderTable</h2><p>Reusable api header table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-key-create-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'apikeycreatedialog apikeycreatedialog overlays reusable api key create dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ApiKeyCreateDialog</h2><p>Reusable api key create dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-key-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apikeydisplay apikeydisplay content reusable api key display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiKeyDisplay</h2><p>Reusable api key display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-key-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'apikeyinput apikeyinput forms reusable api key input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ApiKeyInput</h2><p>Reusable api key input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-method-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apimethodbadge apimethodbadge feedback reusable api method badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiMethodBadge</h2><p>Reusable api method badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-parameter-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apiparametertable apiparametertable data reusable api parameter table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiParameterTable</h2><p>Reusable api parameter table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-rate-limit-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiratelimitnotice apiratelimitnotice feedback reusable api rate limit notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiRateLimitNotice</h2><p>Reusable api rate limit notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-request-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apirequestexample apirequestexample content reusable api request example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiRequestExample</h2><p>Reusable api request example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-response-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apiresponseexample apiresponseexample content reusable api response example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiResponseExample</h2><p>Reusable api response example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-schema-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apischematable apischematable data reusable api schema table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiSchemaTable</h2><p>Reusable api schema table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-schema-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apischemaviewer apischemaviewer content reusable api schema viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiSchemaViewer</h2><p>Reusable api schema viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/api-version-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiversionbadge apiversionbadge feedback reusable api version badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiVersionBadge</h2><p>Reusable api version badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/app-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'appheader appheader layout reusable app header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>AppHeader</h2><p>Reusable app header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/architecture-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'architecturesection architecturesection layout reusable architecture section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArchitectureSection</h2><p>Reusable architecture section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/area-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'areachart areachart visualization reusable area chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>AreaChart</h2><p>Reusable area chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/article-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlehero articlehero layout reusable article hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticleHero</h2><p>Reusable article hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/article-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlelayout articlelayout layout reusable article layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticleLayout</h2><p>Reusable article layout component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/article-newsletter-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'articlenewslettercta articlenewslettercta actions reusable article newsletter c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ArticleNewsletterCTA</h2><p>Reusable article newsletter c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/article-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlepageshell articlepageshell layout reusable article page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticlePageShell</h2><p>Reusable article page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/article-share-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'articleshareactions articleshareactions actions reusable article share actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ArticleShareActions</h2><p>Reusable article share actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/aspect-ratio" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'aspectratio aspectratio core reusable aspect ratio component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>AspectRatio</h2><p>Reusable aspect ratio component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/asset-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'assetcard assetcard content reusable asset card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AssetCard</h2><p>Reusable asset card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/attachment-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'attachmentpicker attachmentpicker forms reusable attachment picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AttachmentPicker</h2><p>Reusable attachment picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/attachment-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'attachmentupload attachmentupload content reusable attachment upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AttachmentUpload</h2><p>Reusable attachment upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/audio-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'audioupload audioupload content reusable audio upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AudioUpload</h2><p>Reusable audio upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/audit-log-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'auditlogpreview auditlogpreview content reusable audit log preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuditLogPreview</h2><p>Reusable audit log preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/audit-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'audittable audittable data reusable audit table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>AuditTable</h2><p>Reusable audit table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/authenticator-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'authenticatorcodeinput authenticatorcodeinput forms reusable authenticator code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AuthenticatorCodeInput</h2><p>Reusable authenticator code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/author-avatar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authoravatar authoravatar content reusable author avatar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorAvatar</h2><p>Reusable author avatar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/author-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authorcard authorcard content reusable author card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorCard</h2><p>Reusable author card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/authorized-application-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authorizedapplicationcard authorizedapplicationcard content reusable authorized application card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorizedApplicationCard</h2><p>Reusable authorized application card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/auto-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'autogrid autogrid data reusable auto grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>AutoGrid</h2><p>Reusable auto grid component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/automation-example-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'automationexamplecard automationexamplecard content reusable automation example card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AutomationExampleCard</h2><p>Reusable automation example card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/availability-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'availabilitycalendar availabilitycalendar content reusable availability calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AvailabilityCalendar</h2><p>Reusable availability calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'avatar avatar content reusable avatar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Avatar</h2><p>Reusable avatar component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'avatargroup avatargroup forms reusable avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AvatarGroup</h2><p>Reusable avatar group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/avatar-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'avatarupload avatarupload content reusable avatar upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AvatarUpload</h2><p>Reusable avatar upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/back-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'backbutton backbutton actions reusable back button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>BackButton</h2><p>Reusable back button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/back-to-top" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'backtotop backtotop core reusable back to top component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>BackToTop</h2><p>Reusable back to top component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'badge badge feedback reusable badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Badge</h2><p>Reusable badge component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/bank-transfer-details" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'banktransferdetails banktransferdetails content reusable bank transfer details component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BankTransferDetails</h2><p>Reusable bank transfer details component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'banner banner feedback reusable banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Banner</h2><p>Reusable banner component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/bar-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'barchart barchart visualization reusable bar chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>BarChart</h2><p>Reusable bar chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/beta-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'betabadge betabadge feedback reusable beta badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>BetaBadge</h2><p>Reusable beta badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/billing-address-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'billingaddressform billingaddressform content reusable billing address form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BillingAddressForm</h2><p>Reusable billing address form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/billing-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'billingexample billingexample content reusable billing example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BillingExample</h2><p>Reusable billing example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/billing-period-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'billingperiodtoggle billingperiodtoggle forms reusable billing period toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BillingPeriodToggle</h2><p>Reusable billing period toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/blackout-date-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'blackoutdatepicker blackoutdatepicker forms reusable blackout date picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BlackoutDatePicker</h2><p>Reusable blackout date picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/blog-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'blogcard blogcard content reusable blog card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BlogCard</h2><p>Reusable blog card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/blog-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'bloggrid bloggrid data reusable blog grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>BlogGrid</h2><p>Reusable blog grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/blog-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'bloglist bloglist data reusable blog list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>BlogList</h2><p>Reusable blog list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/blog-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'blogsearch blogsearch content reusable blog search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BlogSearch</h2><p>Reusable blog search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/body-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'bodytext bodytext content reusable body text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BodyText</h2><p>Reusable body text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/border-radius-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'borderradiuspicker borderradiuspicker forms reusable border radius picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BorderRadiusPicker</h2><p>Reusable border radius picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/bottom-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'bottomnavigation bottomnavigation layout reusable bottom navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>BottomNavigation</h2><p>Reusable bottom navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/brand-color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'brandcolorpicker brandcolorpicker forms reusable brand color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BrandColorPicker</h2><p>Reusable brand color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/brand-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'brandselector brandselector forms reusable brand selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BrandSelector</h2><p>Reusable brand selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/breadcrumbs" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'breadcrumbs breadcrumbs core reusable breadcrumbs component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Breadcrumbs</h2><p>Reusable breadcrumbs component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/browser-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'browserframe browserframe layout reusable browser frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>BrowserFrame</h2><p>Reusable browser frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/budget-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'budgetrangeslider budgetrangeslider content reusable budget range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BudgetRangeSlider</h2><p>Reusable budget range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/budget-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'budgetselector budgetselector forms reusable budget selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BudgetSelector</h2><p>Reusable budget selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/business-hours-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'businesshourspicker businesshourspicker forms reusable business hours picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BusinessHoursPicker</h2><p>Reusable business hours picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'button button actions reusable button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>Button</h2><p>Reusable button component.</p><div class="component-card-meta"><span>10 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'buttongroup buttongroup forms reusable button group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ButtonGroup</h2><p>Reusable button group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/button-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'buttonselector buttonselector forms reusable button selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ButtonSelector</h2><p>Reusable button selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'calendar calendar content reusable calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Calendar</h2><p>Reusable calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/calendar-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'calendargrid calendargrid data reusable calendar grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CalendarGrid</h2><p>Reusable calendar grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/calendar-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'calendarheader calendarheader layout reusable calendar header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CalendarHeader</h2><p>Reusable calendar header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/calendar-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'calendarnavigation calendarnavigation layout reusable calendar navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CalendarNavigation</h2><p>Reusable calendar navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/callback-url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'callbackurlinput callbackurlinput forms reusable callback url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CallbackUrlInput</h2><p>Reusable callback url input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/campaign-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'campaigncard campaigncard content reusable campaign card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CampaignCard</h2><p>Reusable campaign card component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/campaign-performance-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'campaignperformancepreview campaignperformancepreview content reusable campaign performance preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CampaignPerformancePreview</h2><p>Reusable campaign performance preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/campaign-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'campaignprogress campaignprogress visualization reusable campaign progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CampaignProgress</h2><p>Reusable campaign progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/capability-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'capabilitygrid capabilitygrid data reusable capability grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CapabilityGrid</h2><p>Reusable capability grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/captcha-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'captchafield captchafield forms reusable captcha field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CaptchaField</h2><p>Reusable captcha field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'card card core reusable card component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>card</h2><p>Reusable card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/card-payment-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'cardpaymentform cardpaymentform content reusable card payment form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CardPaymentForm</h2><p>Reusable card payment form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/card-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cardselector cardselector forms reusable card selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CardSelector</h2><p>Reusable card selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/card-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'cardskeleton cardskeleton feedback reusable card skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CardSkeleton</h2><p>Reusable card skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/career-application-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'careerapplicationform careerapplicationform content reusable career application form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CareerApplicationForm</h2><p>Reusable career application form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/career-benefits-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'careerbenefitsgrid careerbenefitsgrid data reusable career benefits grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CareerBenefitsGrid</h2><p>Reusable career benefits grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'carousel carousel content reusable carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Carousel</h2><p>Reusable carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/case-study-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'casestudycard casestudycard content reusable case study card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CaseStudyCard</h2><p>Reusable case study card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/case-study-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'casestudyhero casestudyhero layout reusable case study hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CaseStudyHero</h2><p>Reusable case study hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/case-study-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'casestudypreview casestudypreview content reusable case study preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CaseStudyPreview</h2><p>Reusable case study preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/centered-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'centeredcta centeredcta actions reusable centered c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CenteredCTA</h2><p>Reusable centered c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/centered-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'centeredhero centeredhero layout reusable centered hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CenteredHero</h2><p>Reusable centered hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/centered-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'centeredsectionheader centeredsectionheader layout reusable centered section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CenteredSectionHeader</h2><p>Reusable centered section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/certificate-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'certificateupload certificateupload content reusable certificate upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CertificateUpload</h2><p>Reusable certificate upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/certification-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'certificationbadge certificationbadge feedback reusable certification badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CertificationBadge</h2><p>Reusable certification badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/challenge-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'challengesection challengesection layout reusable challenge section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ChallengeSection</h2><p>Reusable challenge section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'channelbadge channelbadge feedback reusable channel badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ChannelBadge</h2><p>Reusable channel badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'channelcard channelcard content reusable channel card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChannelCard</h2><p>Reusable channel card component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-comparison-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelcomparisonchart channelcomparisonchart visualization reusable channel comparison chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelComparisonChart</h2><p>Reusable channel comparison chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'channelcomparisontable channelcomparisontable data reusable channel comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ChannelComparisonTable</h2><p>Reusable channel comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-fallback-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelfallbackdiagram channelfallbackdiagram visualization reusable channel fallback diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelFallbackDiagram</h2><p>Reusable channel fallback diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-flow" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelflow channelflow visualization reusable channel flow component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelFlow</h2><p>Reusable channel flow component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'channelicon channelicon content reusable channel icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChannelIcon</h2><p>Reusable channel icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-rate-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'channelratetable channelratetable data reusable channel rate table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ChannelRateTable</h2><p>Reusable channel rate table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/channel-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'channelselector channelselector forms reusable channel selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ChannelSelector</h2><p>Reusable channel selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/character-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'charactercounter charactercounter feedback reusable character counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CharacterCounter</h2><p>Reusable character counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/chart-empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'chartemptystate chartemptystate feedback reusable chart empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ChartEmptyState</h2><p>Reusable chart empty state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/chart-tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'charttooltip charttooltip content reusable chart tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChartTooltip</h2><p>Reusable chart tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'checkbox checkbox core reusable checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Checkbox</h2><p>Reusable checkbox component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/checkbox-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkboxgroup checkboxgroup forms reusable checkbox group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CheckboxGroup</h2><p>Reusable checkbox group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'checklist checklist content reusable checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Checklist</h2><p>Reusable checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/checklist-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'checklistprogress checklistprogress visualization reusable checklist progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChecklistProgress</h2><p>Reusable checklist progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/chip" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'chip chip core reusable chip component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Chip</h2><p>Reusable chip component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/chip-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'chipinput chipinput forms reusable chip input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ChipInput</h2><p>Reusable chip input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/circular-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'circularprogress circularprogress visualization reusable circular progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CircularProgress</h2><p>Reusable circular progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/city-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cityselector cityselector forms reusable city selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CitySelector</h2><p>Reusable city selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/clear-filters-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'clearfiltersbutton clearfiltersbutton actions reusable clear filters button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ClearFiltersButton</h2><p>Reusable clear filters button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/clickable-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'clickablecard clickablecard content reusable clickable card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ClickableCard</h2><p>Reusable clickable card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/close-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'closebutton closebutton actions reusable close button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CloseButton</h2><p>Reusable close button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cluster" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'cluster cluster core reusable cluster component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Cluster</h2><p>Reusable cluster component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'code code content reusable code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Code</h2><p>Reusable code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codeblock codeblock content reusable code block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeBlock</h2><p>Reusable code block component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-copy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'codecopybutton codecopybutton actions reusable code copy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CodeCopyButton</h2><p>Reusable code copy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'codeheader codeheader layout reusable code header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CodeHeader</h2><p>Reusable code header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'codeinput codeinput forms reusable code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CodeInput</h2><p>Reusable code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-language-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'codelanguagebadge codelanguagebadge feedback reusable code language badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CodeLanguageBadge</h2><p>Reusable code language badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codetabs codetabs content reusable code tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeTabs</h2><p>Reusable code tabs component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/code-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codetext codetext content reusable code text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeText</h2><p>Reusable code text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cohort-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'cohortchart cohortchart visualization reusable cohort chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CohortChart</h2><p>Reusable cohort chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/color-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'colorgrid colorgrid data reusable color grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ColorGrid</h2><p>Reusable color grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/color-hex-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorhexinput colorhexinput forms reusable color hex input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorHexInput</h2><p>Reusable color hex input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms reusable color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Reusable color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/color-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorselector colorselector forms reusable color selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorSelector</h2><p>Reusable color selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/color-swatch" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'colorswatch colorswatch content reusable color swatch component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ColorSwatch</h2><p>Reusable color swatch component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/combobox" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'combobox combobox core reusable combobox component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Combobox</h2><p>Reusable combobox component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/coming-soon-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'comingsoonbadge comingsoonbadge feedback reusable coming soon badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ComingSoonBadge</h2><p>Reusable coming soon badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/coming-soon-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'comingsoonstate comingsoonstate feedback reusable coming soon state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ComingSoonState</h2><p>Reusable coming soon state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/command-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'commandblock commandblock content reusable command block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CommandBlock</h2><p>Reusable command block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/command-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'commandmenu commandmenu overlays reusable command menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>CommandMenu</h2><p>Reusable command menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/command-search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'commandsearchinput commandsearchinput forms reusable command search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CommandSearchInput</h2><p>Reusable command search input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/company-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'companyhero companyhero layout reusable company hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CompanyHero</h2><p>Reusable company hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/company-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'companynameinput companynameinput forms reusable company name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CompanyNameInput</h2><p>Reusable company name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/company-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'companypageshell companypageshell layout reusable company page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CompanyPageShell</h2><p>Reusable company page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/company-size-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'companysizeselector companysizeselector forms reusable company size selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CompanySizeSelector</h2><p>Reusable company size selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/comparison-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'comparisondaterangepicker comparisondaterangepicker forms reusable comparison date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ComparisonDateRangePicker</h2><p>Reusable comparison date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'comparisontable comparisontable data reusable comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ComparisonTable</h2><p>Reusable comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/completion-meter" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'completionmeter completionmeter visualization reusable completion meter component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CompletionMeter</h2><p>Reusable completion meter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/compliance-badge-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'compliancebadgelist compliancebadgelist data reusable compliance badge list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ComplianceBadgeList</h2><p>Reusable compliance badge list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/compliance-program-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'complianceprogramcard complianceprogramcard content reusable compliance program card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ComplianceProgramCard</h2><p>Reusable compliance program card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/confirmation-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'confirmationdialog confirmationdialog overlays reusable confirmation dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ConfirmationDialog</h2><p>Reusable confirmation dialog component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/confirm-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'confirmpasswordinput confirmpasswordinput forms reusable confirm password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ConfirmPasswordInput</h2><p>Reusable confirm password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/connected-account-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'connectedaccountcard connectedaccountcard content reusable connected account card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConnectedAccountCard</h2><p>Reusable connected account card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/connection-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'connectioncard connectioncard content reusable connection card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConnectionCard</h2><p>Reusable connection card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/consent-timeline-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'consenttimelinepreview consenttimelinepreview content reusable consent timeline preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConsentTimelinePreview</h2><p>Reusable consent timeline preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactcard contactcard content reusable contact card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactCard</h2><p>Reusable contact card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'contactcta contactcta actions reusable contact c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ContactCTA</h2><p>Reusable contact c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactform contactform content reusable contact form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactForm</h2><p>Reusable contact form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'contacthero contacthero layout reusable contact hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ContactHero</h2><p>Reusable contact hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'contactpageshell contactpageshell layout reusable contact page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ContactPageShell</h2><p>Reusable contact page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-sales-banner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'contactsalesbanner contactsalesbanner core reusable contact sales banner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ContactSalesBanner</h2><p>Reusable contact sales banner component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-sales-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'contactsalesbutton contactsalesbutton actions reusable contact sales button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ContactSalesButton</h2><p>Reusable contact sales button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/contact-sales-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactsalesform contactsalesform content reusable contact sales form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactSalesForm</h2><p>Reusable contact sales form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'container container core reusable container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Container</h2><p>Reusable container component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays reusable context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Reusable context menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/context-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contextswitcher contextswitcher content reusable context switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContextSwitcher</h2><p>Reusable context switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/conversation-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'conversationlist conversationlist data reusable conversation list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ConversationList</h2><p>Reusable conversation list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/conversation-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'conversationpreview conversationpreview content reusable conversation preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConversationPreview</h2><p>Reusable conversation preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/conversion-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'conversionchart conversionchart visualization reusable conversion chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ConversionChart</h2><p>Reusable conversion chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'cookiebanner cookiebanner feedback reusable cookie banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CookieBanner</h2><p>Reusable cookie banner component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-category-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookiecategorylist cookiecategorylist data reusable cookie category list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieCategoryList</h2><p>Reusable cookie category list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-category-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cookiecategorytoggle cookiecategorytoggle forms reusable cookie category toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CookieCategoryToggle</h2><p>Reusable cookie category toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-consent" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'cookieconsent cookieconsent core reusable cookie consent component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>CookieConsent</h2><p>Reusable cookie consent component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-details-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookiedetailstable cookiedetailstable data reusable cookie details table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieDetailsTable</h2><p>Reusable cookie details table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-preferences-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'cookiepreferencesdialog cookiepreferencesdialog overlays reusable cookie preferences dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>CookiePreferencesDialog</h2><p>Reusable cookie preferences dialog component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cookie-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookietable cookietable data reusable cookie table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieTable</h2><p>Reusable cookie table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/coordinates-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'coordinatesinput coordinatesinput forms reusable coordinates input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CoordinatesInput</h2><p>Reusable coordinates input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/coordinates-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'coordinatespicker coordinatespicker forms reusable coordinates picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CoordinatesPicker</h2><p>Reusable coordinates picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/copy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'copybutton copybutton actions reusable copy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CopyButton</h2><p>Reusable copy button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/copy-code-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'copycodebutton copycodebutton actions reusable copy code button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CopyCodeButton</h2><p>Reusable copy code button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/copy-secret-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'copysecretfield copysecretfield forms reusable copy secret field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CopySecretField</h2><p>Reusable copy secret field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cost-breakdown-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'costbreakdownchart costbreakdownchart visualization reusable cost breakdown chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CostBreakdownChart</h2><p>Reusable cost breakdown chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cost-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'costsummary costsummary content reusable cost summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CostSummary</h2><p>Reusable cost summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'counter counter feedback reusable counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Counter</h2><p>Reusable counter component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/country-calling-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countrycallingcodeinput countrycallingcodeinput forms reusable country calling code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountryCallingCodeInput</h2><p>Reusable country calling code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/country-calling-code-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countrycallingcodeselector countrycallingcodeselector forms reusable country calling code selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountryCallingCodeSelector</h2><p>Reusable country calling code selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/country-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countryselector countryselector forms reusable country selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountrySelector</h2><p>Reusable country selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/coupon-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'couponinput couponinput forms reusable coupon input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CouponInput</h2><p>Reusable coupon input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/credit-amount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'creditamountinput creditamountinput forms reusable credit amount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CreditAmountInput</h2><p>Reusable credit amount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cron-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'cronbuilder cronbuilder content reusable cron builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CronBuilder</h2><p>Reusable cron builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/cron-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'croninput croninput forms reusable cron input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CronInput</h2><p>Reusable cron input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/csv-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'csvupload csvupload content reusable csv upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CsvUpload</h2><p>Reusable csv upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/ctasection" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'ctasection ctasection layout reusable c t a section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CTASection</h2><p>Reusable c t a section component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/currency-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currencyinput currencyinput forms reusable currency input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrencyInput</h2><p>Reusable currency input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/currency-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currencyselector currencyselector forms reusable currency selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrencySelector</h2><p>Reusable currency selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/current-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currentpasswordinput currentpasswordinput forms reusable current password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrentPasswordInput</h2><p>Reusable current password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/customer-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'customerlogo customerlogo content reusable customer logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CustomerLogo</h2><p>Reusable customer logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/customer-story-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'customerstorycard customerstorycard content reusable customer story card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CustomerStoryCard</h2><p>Reusable customer story card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/danger-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'dangerbutton dangerbutton actions reusable danger button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DangerButton</h2><p>Reusable danger button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/data-protection-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'dataprotectioncard dataprotectioncard content reusable data protection card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DataProtectionCard</h2><p>Reusable data protection card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/data-retention-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'dataretentiontable dataretentiontable data reusable data retention table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DataRetentionTable</h2><p>Reusable data retention table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'datatable datatable data reusable data table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DataTable</h2><p>Reusable data table component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'dateinput dateinput forms reusable date input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateInput</h2><p>Reusable date input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datepicker datepicker forms reusable date picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DatePicker</h2><p>Reusable date picker component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-range-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'daterangecalendar daterangecalendar content reusable date range calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DateRangeCalendar</h2><p>Reusable date range calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'daterangepicker daterangepicker forms reusable date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateRangePicker</h2><p>Reusable date range picker component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'daterangeslider daterangeslider content reusable date range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DateRangeSlider</h2><p>Reusable date range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-time-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimeinput datetimeinput forms reusable date time input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimeInput</h2><p>Reusable date time input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimepicker datetimepicker forms reusable date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimePicker</h2><p>Reusable date time picker component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/date-time-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimerangepicker datetimerangepicker forms reusable date time range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimeRangePicker</h2><p>Reusable date time range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/decimal-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'decimalinput decimalinput forms reusable decimal input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DecimalInput</h2><p>Reusable decimal input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/definition-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'definitionlist definitionlist data reusable definition list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DefinitionList</h2><p>Reusable definition list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/delete-confirmation-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'deleteconfirmationdialog deleteconfirmationdialog overlays reusable delete confirmation dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DeleteConfirmationDialog</h2><p>Reusable delete confirmation dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/delivery-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'deliverypreview deliverypreview content reusable delivery preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeliveryPreview</h2><p>Reusable delivery preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/delivery-status-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'deliverystatuschart deliverystatuschart visualization reusable delivery status chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DeliveryStatusChart</h2><p>Reusable delivery status chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/delivery-status-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'deliverystatustimeline deliverystatustimeline visualization reusable delivery status timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DeliveryStatusTimeline</h2><p>Reusable delivery status timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/demo-request-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'demorequestform demorequestform content reusable demo request form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DemoRequestForm</h2><p>Reusable demo request form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/department-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'departmentinput departmentinput forms reusable department input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DepartmentInput</h2><p>Reusable department input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/deprecated-feature-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'deprecatedfeaturealert deprecatedfeaturealert feedback reusable deprecated feature alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>DeprecatedFeatureAlert</h2><p>Reusable deprecated feature alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/description-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'descriptionlist descriptionlist data reusable description list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DescriptionList</h2><p>Reusable description list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/desktop-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'desktopnavigation desktopnavigation layout reusable desktop navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DesktopNavigation</h2><p>Reusable desktop navigation component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/developer-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'developercta developercta actions reusable developer c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DeveloperCTA</h2><p>Reusable developer c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/developer-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'developerhero developerhero layout reusable developer hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DeveloperHero</h2><p>Reusable developer hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/developer-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'developerpageshell developerpageshell layout reusable developer page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DeveloperPageShell</h2><p>Reusable developer page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/developer-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'developersearch developersearch content reusable developer search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeveloperSearch</h2><p>Reusable developer search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/developers-mega-menu" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'developersmegamenu developersmegamenu core reusable developers mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>DevelopersMegaMenu</h2><p>Reusable developers mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/developers-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'developersmenu developersmenu overlays reusable developers menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DevelopersMenu</h2><p>Reusable developers menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/device-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'devicecard devicecard content reusable device card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeviceCard</h2><p>Reusable device card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/disclosure" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'disclosure disclosure core reusable disclosure component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>disclosure</h2><p>Reusable disclosure component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/discount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'discountinput discountinput forms reusable discount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DiscountInput</h2><p>Reusable discount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/display-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'displayheading displayheading core reusable display heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>DisplayHeading</h2><p>Reusable display heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/display-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'displaynameinput displaynameinput forms reusable display name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DisplayNameInput</h2><p>Reusable display name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'divider divider core reusable divider component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Divider</h2><p>Reusable divider component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/document-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'documentpreview documentpreview content reusable document preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DocumentPreview</h2><p>Reusable document preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/document-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'documentupload documentupload content reusable document upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DocumentUpload</h2><p>Reusable document upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/domain-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'domaininput domaininput forms reusable domain input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DomainInput</h2><p>Reusable domain input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/do-not-sell-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'donotselllink donotselllink actions reusable do not sell link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DoNotSellLink</h2><p>Reusable do not sell link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/donut-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'donutchart donutchart visualization reusable donut chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DonutChart</h2><p>Reusable donut chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/download-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadaction downloadaction actions reusable download action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadAction</h2><p>Reusable download action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/download-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadbutton downloadbutton actions reusable download button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadButton</h2><p>Reusable download button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/download-gate-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'downloadgateform downloadgateform content reusable download gate form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DownloadGateForm</h2><p>Reusable download gate form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/download-policy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadpolicybutton downloadpolicybutton actions reusable download policy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadPolicyButton</h2><p>Reusable download policy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/download-resource-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'downloadresourceform downloadresourceform content reusable download resource form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DownloadResourceForm</h2><p>Reusable download resource form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'drawer drawer core reusable drawer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Drawer</h2><p>Reusable drawer component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/dropdown-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdownmenu dropdownmenu overlays reusable dropdown menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DropdownMenu</h2><p>Reusable dropdown menu component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/dropdown-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'dropdownnavigation dropdownnavigation layout reusable dropdown navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DropdownNavigation</h2><p>Reusable dropdown navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/duration-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'durationinput durationinput forms reusable duration input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DurationInput</h2><p>Reusable duration input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/duration-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'durationpicker durationpicker forms reusable duration picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DurationPicker</h2><p>Reusable duration picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/duration-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'durationslider durationslider content reusable duration slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DurationSlider</h2><p>Reusable duration slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/elevated-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'elevatedcard elevatedcard content reusable elevated card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ElevatedCard</h2><p>Reusable elevated card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/email-body-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emailbodyeditor emailbodyeditor forms reusable email body editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmailBodyEditor</h2><p>Reusable email body editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/email-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'emailcomposer emailcomposer content reusable email composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EmailComposer</h2><p>Reusable email composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/email-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emailinput emailinput forms reusable email input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmailInput</h2><p>Reusable email input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/emoji-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emojipicker emojipicker forms reusable emoji picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmojiPicker</h2><p>Reusable emoji picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'emptystate emptystate feedback reusable empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>EmptyState</h2><p>Reusable empty state component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/encryption-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'encryptiondiagram encryptiondiagram visualization reusable encryption diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>EncryptionDiagram</h2><p>Reusable encryption diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/enterprise-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'enterprisecta enterprisecta actions reusable enterprise c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>EnterpriseCTA</h2><p>Reusable enterprise c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/enterprise-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'enterprisehero enterprisehero layout reusable enterprise hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>EnterpriseHero</h2><p>Reusable enterprise hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/enterprise-pricing-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'enterprisepricingcard enterprisepricingcard content reusable enterprise pricing card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EnterprisePricingCard</h2><p>Reusable enterprise pricing card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/environment-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'environmentselector environmentselector forms reusable environment selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EnvironmentSelector</h2><p>Reusable environment selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/environment-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'environmentswitcher environmentswitcher content reusable environment switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EnvironmentSwitcher</h2><p>Reusable environment switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'erroractions erroractions actions reusable error actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ErrorActions</h2><p>Reusable error actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorcard errorcard content reusable error card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorCard</h2><p>Reusable error card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorcode errorcode content reusable error code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorCode</h2><p>Reusable error code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'errorhero errorhero layout reusable error hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ErrorHero</h2><p>Reusable error hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-illustration" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorillustration errorillustration content reusable error illustration component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorIllustration</h2><p>Reusable error illustration component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorpage errorpage content reusable error page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorPage</h2><p>Reusable error page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'errorpageshell errorpageshell layout reusable error page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ErrorPageShell</h2><p>Reusable error page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'errorstate errorstate feedback reusable error state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ErrorState</h2><p>Reusable error state component.</p><div class="component-card-meta"><span>16 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/error-support-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'errorsupportlink errorsupportlink actions reusable error support link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ErrorSupportLink</h2><p>Reusable error support link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/estimated-cost-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'estimatedcostsummary estimatedcostsummary content reusable estimated cost summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EstimatedCostSummary</h2><p>Reusable estimated cost summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/event-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'eventtable eventtable data reusable event table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>EventTable</h2><p>Reusable event table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/expandable-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'expandabletext expandabletext content reusable expandable text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ExpandableText</h2><p>Reusable expandable text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/expiry-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'expirydatetimepicker expirydatetimepicker forms reusable expiry date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ExpiryDateTimePicker</h2><p>Reusable expiry date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/export-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'exportprogress exportprogress visualization reusable export progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ExportProgress</h2><p>Reusable export progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/external-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'externallink externallink actions reusable external link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ExternalLink</h2><p>Reusable external link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/eyebrow-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'eyebrowtext eyebrowtext content reusable eyebrow text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EyebrowText</h2><p>Reusable eyebrow text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/factor-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'factorcard factorcard content reusable factor card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FactorCard</h2><p>Reusable factor card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/fallback-route-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'fallbackroutebuilder fallbackroutebuilder content reusable fallback route builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FallbackRouteBuilder</h2><p>Reusable fallback route builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/fallback-route-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'fallbackroutediagram fallbackroutediagram visualization reusable fallback route diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FallbackRouteDiagram</h2><p>Reusable fallback route diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/faq" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'faq faq core reusable faq component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FAQ</h2><p>Reusable faq component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/faqaccordion" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'faqaccordion faqaccordion core reusable faqaccordion component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FAQAccordion</h2><p>Reusable faqaccordion component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/favicon-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'faviconupload faviconupload content reusable favicon upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FaviconUpload</h2><p>Reusable favicon upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/fax-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'faxinput faxinput forms reusable fax input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FaxInput</h2><p>Reusable fax input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featurecard featurecard content reusable feature card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureCard</h2><p>Reusable feature card component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featurechecklist featurechecklist content reusable feature checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureChecklist</h2><p>Reusable feature checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featurecomparisontable featurecomparisontable data reusable feature comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureComparisonTable</h2><p>Reusable feature comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/featured-blog-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featuredblogcard featuredblogcard content reusable featured blog card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeaturedBlogCard</h2><p>Reusable featured blog card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-details-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'featuredetailspanel featuredetailspanel layout reusable feature details panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>FeatureDetailsPanel</h2><p>Reusable feature details panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featuregrid featuregrid data reusable feature grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureGrid</h2><p>Reusable feature grid component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-icon-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featureiconcard featureiconcard content reusable feature icon card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureIconCard</h2><p>Reusable feature icon card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featurelist featurelist data reusable feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureList</h2><p>Reusable feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featuretabs featuretabs content reusable feature tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureTabs</h2><p>Reusable feature tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'featuretimeline featuretimeline visualization reusable feature timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FeatureTimeline</h2><p>Reusable feature timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/feature-unavailable-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'featureunavailablestate featureunavailablestate feedback reusable feature unavailable state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FeatureUnavailableState</h2><p>Reusable feature unavailable state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/field-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'fieldactions fieldactions actions reusable field actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FieldActions</h2><p>Reusable field actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-upload-primitive" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'file-upload file-upload core reusable file-upload component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>file-upload</h2><p>Reusable file-upload component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms reusable file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Reusable file input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'filelist filelist data reusable file list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FileList</h2><p>Reusable file list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-size-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'filesizeinput filesizeinput forms reusable file size input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileSizeInput</h2><p>Reusable file size input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-size-label" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'filesizelabel filesizelabel content reusable file size label component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FileSizeLabel</h2><p>Reusable file size label component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-type-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'filetypebadge filetypebadge feedback reusable file type badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FileTypeBadge</h2><p>Reusable file type badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'fileupload fileupload content reusable file upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FileUpload</h2><p>Reusable file upload component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/filterable-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'filterabletable filterabletable data reusable filterable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FilterableTable</h2><p>Reusable filterable table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/filter-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'filterbar filterbar core reusable filter bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FilterBar</h2><p>Reusable filter bar component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/filter-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'filtermenu filtermenu overlays reusable filter menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FilterMenu</h2><p>Reusable filter menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/filter-search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'filtersearchinput filtersearchinput forms reusable filter search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FilterSearchInput</h2><p>Reusable filter search input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/final-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'finalcta finalcta actions reusable final c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FinalCTA</h2><p>Reusable final c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/first-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'firstnameinput firstnameinput forms reusable first name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FirstNameInput</h2><p>Reusable first name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/flex" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'flex flex core reusable flex component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Flex</h2><p>Reusable flex component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/font-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontpicker fontpicker forms reusable font picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontPicker</h2><p>Reusable font picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/font-size-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontsizepicker fontsizepicker forms reusable font size picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontSizePicker</h2><p>Reusable font size picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/font-weight-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontweightpicker fontweightpicker forms reusable font weight picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontWeightPicker</h2><p>Reusable font weight picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/footer-language-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'footerlanguageswitcher footerlanguageswitcher content reusable footer language switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FooterLanguageSwitcher</h2><p>Reusable footer language switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/footer-status-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'footerstatusindicator footerstatusindicator feedback reusable footer status indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FooterStatusIndicator</h2><p>Reusable footer status indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/forbidden-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'forbiddenpage forbiddenpage content reusable forbidden page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ForbiddenPage</h2><p>Reusable forbidden page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/forbidden-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'forbiddenstate forbiddenstate feedback reusable forbidden state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ForbiddenState</h2><p>Reusable forbidden state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/forgot-password-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'forgotpasswordform forgotpasswordform content reusable forgot password form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ForgotPasswordForm</h2><p>Reusable forgot password form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'form form content reusable form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Form</h2><p>Reusable form component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'formactions formactions actions reusable form actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FormActions</h2><p>Reusable form actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'formalert formalert feedback reusable form alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FormAlert</h2><p>Reusable form alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'formdialog formdialog overlays reusable form dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FormDialog</h2><p>Reusable form dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-error" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'formerror formerror core reusable form error component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FormError</h2><p>Reusable form error component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-error-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formerrorsummary formerrorsummary content reusable form error summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormErrorSummary</h2><p>Reusable form error summary component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'formfield formfield forms reusable form field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FormField</h2><p>Reusable form field component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'formgrid formgrid data reusable form grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FormGrid</h2><p>Reusable form grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'formgroup formgroup forms reusable form group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FormGroup</h2><p>Reusable form group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-help-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formhelptext formhelptext content reusable form help text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormHelpText</h2><p>Reusable form help text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-label" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formlabel formlabel content reusable form label component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormLabel</h2><p>Reusable form label component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'formprogress formprogress visualization reusable form progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FormProgress</h2><p>Reusable form progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'formrow formrow data reusable form row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FormRow</h2><p>Reusable form row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/form-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'formsection formsection layout reusable form section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>FormSection</h2><p>Reusable form section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/full-bleed" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'fullbleed fullbleed core reusable full bleed component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FullBleed</h2><p>Reusable full bleed component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/fullscreen-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'fullscreendialog fullscreendialog overlays reusable fullscreen dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FullscreenDialog</h2><p>Reusable fullscreen dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/funnel-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'funnelchart funnelchart visualization reusable funnel chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FunnelChart</h2><p>Reusable funnel chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/geo-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'geochart geochart visualization reusable geo chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>GeoChart</h2><p>Reusable geo chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/geofence-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'geofenceeditor geofenceeditor forms reusable geofence editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GeofenceEditor</h2><p>Reusable geofence editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/ghost-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'ghostbutton ghostbutton actions reusable ghost button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>GhostButton</h2><p>Reusable ghost button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/glass-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'glasscard glasscard content reusable glass card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GlassCard</h2><p>Reusable glass card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/global-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'globalsearch globalsearch content reusable global search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GlobalSearch</h2><p>Reusable global search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/gradient-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'gradientcta gradientcta actions reusable gradient c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>GradientCTA</h2><p>Reusable gradient c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/gradient-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'gradientpicker gradientpicker forms reusable gradient picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GradientPicker</h2><p>Reusable gradient picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/gradient-stop-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'gradientstopeditor gradientstopeditor forms reusable gradient stop editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GradientStopEditor</h2><p>Reusable gradient stop editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'grid grid data reusable grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>Grid</h2><p>Reusable grid component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/guide-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidecard guidecard content reusable guide card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideCard</h2><p>Reusable guide card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/guide-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidechecklist guidechecklist content reusable guide checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideChecklist</h2><p>Reusable guide checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/guide-difficulty-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'guidedifficultybadge guidedifficultybadge feedback reusable guide difficulty badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>GuideDifficultyBadge</h2><p>Reusable guide difficulty badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/guide-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'guidegrid guidegrid data reusable guide grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>GuideGrid</h2><p>Reusable guide grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/guide-step" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidestep guidestep content reusable guide step component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideStep</h2><p>Reusable guide step component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'header header layout reusable header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Header</h2><p>Reusable header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/header-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'headeractions headeractions actions reusable header actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeaderActions</h2><p>Reusable header actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/health-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'healthindicator healthindicator feedback reusable health indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>HealthIndicator</h2><p>Reusable health indicator component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'hero hero layout reusable hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Hero</h2><p>Reusable hero component.</p><div class="component-card-meta"><span>10 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'heroactions heroactions actions reusable hero actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroActions</h2><p>Reusable hero actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-code-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'herocodepanel herocodepanel layout reusable hero code panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>HeroCodePanel</h2><p>Reusable hero code panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-gradient-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'herogradienttext herogradienttext content reusable hero gradient text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroGradientText</h2><p>Reusable hero gradient text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-primary-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'heroprimaryaction heroprimaryaction actions reusable hero primary action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroPrimaryAction</h2><p>Reusable hero primary action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-product-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'heroproductpreview heroproductpreview content reusable hero product preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroProductPreview</h2><p>Reusable hero product preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-secondary-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'herosecondaryaction herosecondaryaction actions reusable hero secondary action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroSecondaryAction</h2><p>Reusable hero secondary action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hero-trust-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'herotrusttext herotrusttext content reusable hero trust text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroTrustText</h2><p>Reusable hero trust text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hex-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hexcolorinput hexcolorinput forms reusable hex color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HexColorInput</h2><p>Reusable hex color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hidden-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hiddenfield hiddenfield forms reusable hidden field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HiddenField</h2><p>Reusable hidden field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/highlight-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'highlighttext highlighttext content reusable highlight text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HighlightText</h2><p>Reusable highlight text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/holiday-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'holidaycalendar holidaycalendar content reusable holiday calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HolidayCalendar</h2><p>Reusable holiday calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hostname-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hostnameinput hostnameinput forms reusable hostname input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HostnameInput</h2><p>Reusable hostname input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hour-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hourpicker hourpicker forms reusable hour picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HourPicker</h2><p>Reusable hour picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hsl-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hslcolorinput hslcolorinput forms reusable hsl color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HslColorInput</h2><p>Reusable hsl color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/hstack" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'hstack hstack core reusable hstack component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>hstack</h2><p>Reusable hstack component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/html-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'htmleditor htmleditor forms reusable html editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HtmlEditor</h2><p>Reusable html editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/human-approval-step" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'humanapprovalstep humanapprovalstep content reusable human approval step component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HumanApprovalStep</h2><p>Reusable human approval step component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'icon icon content reusable icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Icon</h2><p>Reusable icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/icon-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'iconbutton iconbutton actions reusable icon button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>IconButton</h2><p>Reusable icon button component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/icon-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'iconpicker iconpicker forms reusable icon picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IconPicker</h2><p>Reusable icon picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/icon-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'iconselector iconselector forms reusable icon selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IconSelector</h2><p>Reusable icon selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/identifier-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'identifierinput identifierinput forms reusable identifier input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IdentifierInput</h2><p>Reusable identifier input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/illustration" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'illustration illustration content reusable illustration component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Illustration</h2><p>Reusable illustration component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/image-compression-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'imagecompressionpreview imagecompressionpreview content reusable image compression preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ImageCompressionPreview</h2><p>Reusable image compression preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/image-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'imageeditor imageeditor forms reusable image editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ImageEditor</h2><p>Reusable image editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/image-preview-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'imagepreviewdialog imagepreviewdialog overlays reusable image preview dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ImagePreviewDialog</h2><p>Reusable image preview dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/image-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'imageselector imageselector forms reusable image selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ImageSelector</h2><p>Reusable image selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/image-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'imageupload imageupload content reusable image upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ImageUpload</h2><p>Reusable image upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/import-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'importprogress importprogress visualization reusable import progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ImportProgress</h2><p>Reusable import progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentalert incidentalert feedback reusable incident alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentAlert</h2><p>Reusable incident alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentbanner incidentbanner feedback reusable incident banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentBanner</h2><p>Reusable incident banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'incidentcard incidentcard content reusable incident card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>IncidentCard</h2><p>Reusable incident card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'incidentlist incidentlist data reusable incident list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>IncidentList</h2><p>Reusable incident list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-response-flow" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'incidentresponseflow incidentresponseflow visualization reusable incident response flow component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>IncidentResponseFlow</h2><p>Reusable incident response flow component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-severity-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentseveritybadge incidentseveritybadge feedback reusable incident severity badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentSeverityBadge</h2><p>Reusable incident severity badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/incident-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'incidenttimeline incidenttimeline visualization reusable incident timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>IncidentTimeline</h2><p>Reusable incident timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/industry-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'industrybadge industrybadge feedback reusable industry badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IndustryBadge</h2><p>Reusable industry badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/industry-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'industryselector industryselector forms reusable industry selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IndustrySelector</h2><p>Reusable industry selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/info-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'infocard infocard content reusable info card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InfoCard</h2><p>Reusable info card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/inline" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'inline inline core reusable inline component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Inline</h2><p>Reusable inline component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/inline-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'inlinealert inlinealert feedback reusable inline alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>InlineAlert</h2><p>Reusable inline alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/inline-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'inlinecode inlinecode content reusable inline code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InlineCode</h2><p>Reusable inline code component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'input input core reusable input component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>input</h2><p>Reusable input component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms reusable input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Reusable input group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/inset-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'insetpanel insetpanel layout reusable inset panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>InsetPanel</h2><p>Reusable inset panel component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/integer-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'integerinput integerinput forms reusable integer input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IntegerInput</h2><p>Reusable integer input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/integration-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'integrationcard integrationcard content reusable integration card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>IntegrationCard</h2><p>Reusable integration card component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/invoice-line-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'invoicelineitem invoicelineitem content reusable invoice line item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InvoiceLineItem</h2><p>Reusable invoice line item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/invoice-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'invoicesummary invoicesummary content reusable invoice summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InvoiceSummary</h2><p>Reusable invoice summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/ip-address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'ipaddressinput ipaddressinput forms reusable ip address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IpAddressInput</h2><p>Reusable ip address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/job-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'jobcard jobcard content reusable job card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>JobCard</h2><p>Reusable job card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/job-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'jobprogress jobprogress visualization reusable job progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>JobProgress</h2><p>Reusable job progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/job-title-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'jobtitleinput jobtitleinput forms reusable job title input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>JobTitleInput</h2><p>Reusable job title input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/json-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'jsoninput jsoninput forms reusable json input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>JsonInput</h2><p>Reusable json input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/json-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'jsonviewer jsonviewer content reusable json viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>JsonViewer</h2><p>Reusable json viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/key-value-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'keyvaluetable keyvaluetable data reusable key value table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>KeyValueTable</h2><p>Reusable key value table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/kyc-document-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'kycdocumentupload kycdocumentupload content reusable kyc document upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>KycDocumentUpload</h2><p>Reusable kyc document upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'languageselector languageselector forms reusable language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LanguageSelector</h2><p>Reusable language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/language-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'languageswitcher languageswitcher content reusable language switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LanguageSwitcher</h2><p>Reusable language switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/last-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'lastnameinput lastnameinput forms reusable last name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LastNameInput</h2><p>Reusable last name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/latency-metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'latencymetric latencymetric visualization reusable latency metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>LatencyMetric</h2><p>Reusable latency metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/latitude-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'latitudeinput latitudeinput forms reusable latitude input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LatitudeInput</h2><p>Reusable latitude input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/leadership-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'leadershipgrid leadershipgrid data reusable leadership grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LeadershipGrid</h2><p>Reusable leadership grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/lead-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'leadtext leadtext content reusable lead text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LeadText</h2><p>Reusable lead text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-acceptance-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalacceptancenotice legalacceptancenotice feedback reusable legal acceptance notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalAcceptanceNotice</h2><p>Reusable legal acceptance notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-bullet-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legalbulletlist legalbulletlist data reusable legal bullet list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalBulletList</h2><p>Reusable legal bullet list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-contact-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'legalcontactblock legalcontactblock content reusable legal contact block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LegalContactBlock</h2><p>Reusable legal contact block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-definition-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legaldefinitionlist legaldefinitionlist data reusable legal definition list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalDefinitionList</h2><p>Reusable legal definition list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-document-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legaldocumentheader legaldocumentheader layout reusable legal document header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalDocumentHeader</h2><p>Reusable legal document header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-document-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legaldocumentlayout legaldocumentlayout layout reusable legal document layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalDocumentLayout</h2><p>Reusable legal document layout component.</p><div class="component-card-meta"><span>4 props</span><span>2 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalhero legalhero layout reusable legal hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalHero</h2><p>Reusable legal hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'legallanguageselector legallanguageselector forms reusable legal language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LegalLanguageSelector</h2><p>Reusable legal language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalnotice legalnotice feedback reusable legal notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalNotice</h2><p>Reusable legal notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalpageshell legalpageshell layout reusable legal page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalPageShell</h2><p>Reusable legal page shell component.</p><div class="component-card-meta"><span>1 props</span><span>2 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-print-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'legalprintbutton legalprintbutton actions reusable legal print button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LegalPrintButton</h2><p>Reusable legal print button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-region-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'legalregionselector legalregionselector forms reusable legal region selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LegalRegionSelector</h2><p>Reusable legal region selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalsection legalsection layout reusable legal section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalSection</h2><p>Reusable legal section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'legalsummary legalsummary content reusable legal summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LegalSummary</h2><p>Reusable legal summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legaltable legaltable data reusable legal table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalTable</h2><p>Reusable legal table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-table-of-contents" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'legaltableofcontents legaltableofcontents core reusable legal table of contents component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>LegalTableOfContents</h2><p>Reusable legal table of contents component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legal-version-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalversionbadge legalversionbadge feedback reusable legal version badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalVersionBadge</h2><p>Reusable legal version badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/letter-spacing-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'letterspacingpicker letterspacingpicker forms reusable letter spacing picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LetterSpacingPicker</h2><p>Reusable letter spacing picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/license-key-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'licensekeyinput licensekeyinput forms reusable license key input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LicenseKeyInput</h2><p>Reusable license key input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/lightbox" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'lightbox lightbox overlays reusable lightbox component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Lightbox</h2><p>Reusable lightbox component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/line-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'linechart linechart visualization reusable line chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>LineChart</h2><p>Reusable line chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/line-height-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'lineheightpicker lineheightpicker forms reusable line height picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LineHeightPicker</h2><p>Reusable line height picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'link link core reusable link component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Link</h2><p>Reusable link component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/link-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'linkbutton linkbutton actions reusable link button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LinkButton</h2><p>Reusable link button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'list list data reusable list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>List</h2><p>Reusable list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/loading-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'loadingbutton loadingbutton actions reusable loading button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LoadingButton</h2><p>Reusable loading button component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/locale-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'localeselector localeselector forms reusable locale selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LocaleSelector</h2><p>Reusable locale selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/localized-route-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'localizedroutelink localizedroutelink actions reusable localized route link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LocalizedRouteLink</h2><p>Reusable localized route link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/location-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'locationpicker locationpicker forms reusable location picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LocationPicker</h2><p>Reusable location picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'logo logo content reusable logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Logo</h2><p>Reusable logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/logo-cloud" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'logocloud logocloud core reusable logo cloud component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>LogoCloud</h2><p>Reusable logo cloud component.</p><div class="component-card-meta"><span>11 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/logo-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'logoupload logoupload content reusable logo upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LogoUpload</h2><p>Reusable logo upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/logout-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'logoutdialog logoutdialog overlays reusable logout dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>LogoutDialog</h2><p>Reusable logout dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/log-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'logtable logtable data reusable log table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LogTable</h2><p>Reusable log table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/longitude-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'longitudeinput longitudeinput forms reusable longitude input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LongitudeInput</h2><p>Reusable longitude input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/maintenance-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancealert maintenancealert feedback reusable maintenance alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceAlert</h2><p>Reusable maintenance alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/maintenance-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancebanner maintenancebanner feedback reusable maintenance banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceBanner</h2><p>Reusable maintenance banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/maintenance-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'maintenancecard maintenancecard content reusable maintenance card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MaintenanceCard</h2><p>Reusable maintenance card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/maintenance-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'maintenancepage maintenancepage content reusable maintenance page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MaintenancePage</h2><p>Reusable maintenance page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/maintenance-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancestate maintenancestate feedback reusable maintenance state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceState</h2><p>Reusable maintenance state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/maintenance-window-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'maintenancewindowpicker maintenancewindowpicker forms reusable maintenance window picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MaintenanceWindowPicker</h2><p>Reusable maintenance window picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/map-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mappicker mappicker forms reusable map picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MapPicker</h2><p>Reusable map picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/markdown-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'markdowneditor markdowneditor forms reusable markdown editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MarkdownEditor</h2><p>Reusable markdown editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/marketing-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'marketingpageshell marketingpageshell layout reusable marketing page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MarketingPageShell</h2><p>Reusable marketing page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/marketing-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'marketingsectionheader marketingsectionheader layout reusable marketing section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MarketingSectionHeader</h2><p>Reusable marketing section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/masked-secret-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'maskedsecretfield maskedsecretfield forms reusable masked secret field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MaskedSecretField</h2><p>Reusable masked secret field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'megamenu megamenu overlays reusable mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>MegaMenu</h2><p>Reusable mega menu component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/member-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'memberlist memberlist data reusable member list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>MemberList</h2><p>Reusable member list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mention-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mentioninput mentioninput forms reusable mention input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MentionInput</h2><p>Reusable mention input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/message-character-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'messagecharactercounter messagecharactercounter feedback reusable message character counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MessageCharacterCounter</h2><p>Reusable message character counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/message-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagecomposer messagecomposer content reusable message composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageComposer</h2><p>Reusable message composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/message-composer-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagecomposerpreview messagecomposerpreview content reusable message composer preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageComposerPreview</h2><p>Reusable message composer preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/message-limit-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'messagelimitinput messagelimitinput forms reusable message limit input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MessageLimitInput</h2><p>Reusable message limit input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/message-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagepreview messagepreview content reusable message preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessagePreview</h2><p>Reusable message preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/message-volume-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagevolumeslider messagevolumeslider content reusable message volume slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageVolumeSlider</h2><p>Reusable message volume slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'metric metric visualization reusable metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>Metric</h2><p>Reusable metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/metric-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'metriccard metriccard content reusable metric card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MetricCard</h2><p>Reusable metric card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/metric-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'metricgrid metricgrid data reusable metric grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>MetricGrid</h2><p>Reusable metric grid component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/metric-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'metrictext metrictext content reusable metric text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MetricText</h2><p>Reusable metric text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/minute-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'minutepicker minutepicker forms reusable minute picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MinutePicker</h2><p>Reusable minute picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mission-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'missionsection missionsection layout reusable mission section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MissionSection</h2><p>Reusable mission section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mobile-device-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'mobiledeviceframe mobiledeviceframe layout reusable mobile device frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MobileDeviceFrame</h2><p>Reusable mobile device frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mobile-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mobileinput mobileinput forms reusable mobile input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MobileInput</h2><p>Reusable mobile input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mobile-menu-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'mobilemenubutton mobilemenubutton actions reusable mobile menu button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>MobileMenuButton</h2><p>Reusable mobile menu button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mobile-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'mobilenavigation mobilenavigation layout reusable mobile navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MobileNavigation</h2><p>Reusable mobile navigation component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/mobile-table-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'mobiletablecard mobiletablecard content reusable mobile table card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MobileTableCard</h2><p>Reusable mobile table card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'modal modal core reusable modal component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Modal</h2><p>Reusable modal component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/monthly-volume-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthlyvolumeselector monthlyvolumeselector forms reusable monthly volume selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthlyVolumeSelector</h2><p>Reusable monthly volume selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/month-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthpicker monthpicker forms reusable month picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthPicker</h2><p>Reusable month picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/month-year-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthyearpicker monthyearpicker forms reusable month year picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthYearPicker</h2><p>Reusable month year picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/multi-file-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'multifileupload multifileupload content reusable multi file upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MultiFileUpload</h2><p>Reusable multi file upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/multiple-email-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'multipleemailinput multipleemailinput forms reusable multiple email input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MultipleEmailInput</h2><p>Reusable multiple email input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/multi-select" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'multiselect multiselect core reusable multi select component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>MultiSelect</h2><p>Reusable multi select component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/muted-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'mutedtext mutedtext content reusable muted text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MutedText</h2><p>Reusable muted text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'nameinput nameinput forms reusable name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NameInput</h2><p>Reusable name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/narrow-container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'narrowcontainer narrowcontainer core reusable narrow container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>NarrowContainer</h2><p>Reusable narrow container component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'navigation navigation layout reusable navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Navigation</h2><p>Reusable navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/navigation-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'navigationitem navigationitem content reusable navigation item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NavigationItem</h2><p>Reusable navigation item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/navigation-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'navigationmegamenu navigationmegamenu overlays reusable navigation mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>NavigationMegaMenu</h2><p>Reusable navigation mega menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/new-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'newbadge newbadge feedback reusable new badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NewBadge</h2><p>Reusable new badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/new-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'newpasswordinput newpasswordinput forms reusable new password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NewPasswordInput</h2><p>Reusable new password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/newsletter-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'newslettercta newslettercta actions reusable newsletter c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>NewsletterCTA</h2><p>Reusable newsletter c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/newsletter-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'newsletterform newsletterform content reusable newsletter form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NewsletterForm</h2><p>Reusable newsletter form component.</p><div class="component-card-meta"><span>19 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/no-results-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'noresultsstate noresultsstate feedback reusable no results state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NoResultsState</h2><p>Reusable no results state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/not-found-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'notfoundpage notfoundpage content reusable not found page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NotFoundPage</h2><p>Reusable not found page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/not-found-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'notfoundstate notfoundstate feedback reusable not found state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NotFoundState</h2><p>Reusable not found state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/notification-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'notificationcard notificationcard content reusable notification card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NotificationCard</h2><p>Reusable notification card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/notification-dot" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'notificationdot notificationdot core reusable notification dot component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>NotificationDot</h2><p>Reusable notification dot component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/notification-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'notificationlist notificationlist data reusable notification list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>NotificationList</h2><p>Reusable notification list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'numberinput numberinput forms reusable number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NumberInput</h2><p>Reusable number input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/office-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'officecard officecard content reusable office card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OfficeCard</h2><p>Reusable office card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/offline-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'offlinepage offlinepage content reusable offline page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OfflinePage</h2><p>Reusable offline page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/offline-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'offlinestate offlinestate feedback reusable offline state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OfflineState</h2><p>Reusable offline state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/onboarding-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'onboardingprogress onboardingprogress visualization reusable onboarding progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>OnboardingProgress</h2><p>Reusable onboarding progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/one-time-secret-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'onetimesecretdisplay onetimesecretdisplay content reusable one time secret display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OneTimeSecretDisplay</h2><p>Reusable one time secret display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/online-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'onlineindicator onlineindicator feedback reusable online indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OnlineIndicator</h2><p>Reusable online indicator component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/opacity-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'opacityslider opacityslider content reusable opacity slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OpacitySlider</h2><p>Reusable opacity slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/open-apicta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'openapicta openapicta actions reusable open a p i c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>OpenAPICTA</h2><p>Reusable open a p i c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/optional-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'optionalindicator optionalindicator feedback reusable optional indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OptionalIndicator</h2><p>Reusable optional indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/organization-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'organizationselector organizationselector forms reusable organization selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>OrganizationSelector</h2><p>Reusable organization selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/otp-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'otpinput otpinput forms reusable otp input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>OtpInput</h2><p>Reusable otp input component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/otp-verification-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'otpverificationform otpverificationform content reusable otp verification form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OtpVerificationForm</h2><p>Reusable otp verification form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/outlined-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'outlinedcard outlinedcard content reusable outlined card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OutlinedCard</h2><p>Reusable outlined card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/page-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'pagealert pagealert feedback reusable page alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PageAlert</h2><p>Reusable page alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/page-header" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageheader pageheader core reusable page header component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageHeader</h2><p>Reusable page header component.</p><div class="component-card-meta"><span>16 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/page-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageheading pageheading core reusable page heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageHeading</h2><p>Reusable page heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/page-shell" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageshell pageshell core reusable page shell component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageShell</h2><p>Reusable page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/page-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'pageskeleton pageskeleton feedback reusable page skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PageSkeleton</h2><p>Reusable page skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pagination pagination core reusable pagination component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Pagination</h2><p>Reusable pagination component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'panel panel layout reusable panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Panel</h2><p>Reusable panel component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/partner-application-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'partnerapplicationform partnerapplicationform content reusable partner application form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PartnerApplicationForm</h2><p>Reusable partner application form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/partner-logo-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'partnerlogogrid partnerlogogrid data reusable partner logo grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PartnerLogoGrid</h2><p>Reusable partner logo grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/partner-program-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'partnerprogramcard partnerprogramcard content reusable partner program card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PartnerProgramCard</h2><p>Reusable partner program card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/passkey-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'passkeybutton passkeybutton actions reusable passkey button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PasskeyButton</h2><p>Reusable passkey button component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'passwordinput passwordinput forms reusable password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PasswordInput</h2><p>Reusable password input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/password-requirement-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'passwordrequirementlist passwordrequirementlist data reusable password requirement list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PasswordRequirementList</h2><p>Reusable password requirement list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/password-strength-meter" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'passwordstrengthmeter passwordstrengthmeter visualization reusable password strength meter component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>PasswordStrengthMeter</h2><p>Reusable password strength meter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/password-visibility-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'passwordvisibilitytoggle passwordvisibilitytoggle forms reusable password visibility toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PasswordVisibilityToggle</h2><p>Reusable password visibility toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/path-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pathinput pathinput forms reusable path input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PathInput</h2><p>Reusable path input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/payment-method-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'paymentmethodcard paymentmethodcard content reusable payment method card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PaymentMethodCard</h2><p>Reusable payment method card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pdf-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pdfpreview pdfpreview content reusable pdf preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PdfPreview</h2><p>Reusable pdf preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/percentage-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'percentageinput percentageinput forms reusable percentage input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PercentageInput</h2><p>Reusable percentage input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/permission-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'permissionselector permissionselector forms reusable permission selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PermissionSelector</h2><p>Reusable permission selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/phone-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'phoneinput phoneinput forms reusable phone input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PhoneInput</h2><p>Reusable phone input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pie-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'piechart piechart visualization reusable pie chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>PieChart</h2><p>Reusable pie chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pill" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pill pill core reusable pill component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Pill</h2><p>Reusable pill component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pin-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pininput pininput forms reusable pin input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PinInput</h2><p>Reusable pin input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/plain-text-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'plaintexteditor plaintexteditor forms reusable plain text editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PlainTextEditor</h2><p>Reusable plain text editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/plan-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'plancta plancta actions reusable plan c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PlanCTA</h2><p>Reusable plan c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/plan-feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'planfeaturelist planfeaturelist data reusable plan feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PlanFeatureList</h2><p>Reusable plan feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/plan-limit-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'planlimitlist planlimitlist data reusable plan limit list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PlanLimitList</h2><p>Reusable plan limit list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/plan-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'planselector planselector forms reusable plan selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PlanSelector</h2><p>Reusable plan selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/platform-pillar-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'platformpillarcard platformpillarcard content reusable platform pillar card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PlatformPillarCard</h2><p>Reusable platform pillar card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/policy-version-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'policyversiontable policyversiontable data reusable policy version table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PolicyVersionTable</h2><p>Reusable policy version table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays reusable popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Reusable popover component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/port-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'portinput portinput forms reusable port input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PortInput</h2><p>Reusable port input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/port-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'portnumberinput portnumberinput forms reusable port number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PortNumberInput</h2><p>Reusable port number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/positive-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'positivenumberinput positivenumberinput forms reusable positive number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PositiveNumberInput</h2><p>Reusable positive number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/postal-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'postalcodeinput postalcodeinput forms reusable postal code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PostalCodeInput</h2><p>Reusable postal code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/postman-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'postmancta postmancta actions reusable postman c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PostmanCTA</h2><p>Reusable postman c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/preset-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'presetdaterangepicker presetdaterangepicker forms reusable preset date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PresetDateRangePicker</h2><p>Reusable preset date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/press-release-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pressreleasecard pressreleasecard content reusable press release card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PressReleaseCard</h2><p>Reusable press release card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/preview-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'previewbadge previewbadge feedback reusable preview badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PreviewBadge</h2><p>Reusable preview badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/previous-next-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'previousnextnavigation previousnextnavigation layout reusable previous next navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PreviousNextNavigation</h2><p>Reusable previous next navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/price-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'priceinput priceinput forms reusable price input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PriceInput</h2><p>Reusable price input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/price-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricerangeslider pricerangeslider content reusable price range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PriceRangeSlider</h2><p>Reusable price range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/price-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricetext pricetext content reusable price text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PriceText</h2><p>Reusable price text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingcard pricingcard content reusable pricing card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingCard</h2><p>Reusable pricing card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricingcomparisontable pricingcomparisontable data reusable pricing comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingComparisonTable</h2><p>Reusable pricing comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-contact-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingcontactform pricingcontactform content reusable pricing contact form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingContactForm</h2><p>Reusable pricing contact form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-feature-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pricingfeaturegroup pricingfeaturegroup forms reusable pricing feature group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PricingFeatureGroup</h2><p>Reusable pricing feature group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricinggrid pricinggrid data reusable pricing grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingGrid</h2><p>Reusable pricing grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'pricinghero pricinghero layout reusable pricing hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PricingHero</h2><p>Reusable pricing hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-plan-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingplancard pricingplancard content reusable pricing plan card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingPlanCard</h2><p>Reusable pricing plan card component.</p><div class="component-card-meta"><span>9 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricingtable pricingtable data reusable pricing table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingTable</h2><p>Reusable pricing table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pricing-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pricingtoggle pricingtoggle forms reusable pricing toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PricingToggle</h2><p>Reusable pricing toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/primary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'primarybutton primarybutton actions reusable primary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrimaryButton</h2><p>Reusable primary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/print-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'printaction printaction actions reusable print action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrintAction</h2><p>Reusable print action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/print-policy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'printpolicybutton printpolicybutton actions reusable print policy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrintPolicyButton</h2><p>Reusable print policy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/priority-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'priorityselector priorityselector forms reusable priority selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PrioritySelector</h2><p>Reusable priority selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/privacy-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'privacynotice privacynotice feedback reusable privacy notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PrivacyNotice</h2><p>Reusable privacy notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-architecture-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'productarchitecturediagram productarchitecturediagram visualization reusable product architecture diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProductArchitectureDiagram</h2><p>Reusable product architecture diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productcard productcard content reusable product card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductCard</h2><p>Reusable product card component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-category-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'productcategorysection productcategorysection layout reusable product category section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductCategorySection</h2><p>Reusable product category section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'productcta productcta actions reusable product c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ProductCTA</h2><p>Reusable product c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productfeaturelist productfeaturelist data reusable product feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductFeatureList</h2><p>Reusable product feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productgrid productgrid data reusable product grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductGrid</h2><p>Reusable product grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'producthero producthero layout reusable product hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductHero</h2><p>Reusable product hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'producticon producticon content reusable product icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductIcon</h2><p>Reusable product icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-integration-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productintegrationlist productintegrationlist data reusable product integration list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductIntegrationList</h2><p>Reusable product integration list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productlist productlist data reusable product list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductList</h2><p>Reusable product list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productlogo productlogo content reusable product logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductLogo</h2><p>Reusable product logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-mega-menu" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'productmegamenu productmegamenu core reusable product mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ProductMegaMenu</h2><p>Reusable product mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-mini-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productminicard productminicard content reusable product mini card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductMiniCard</h2><p>Reusable product mini card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-navigation-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productnavigationcard productnavigationcard content reusable product navigation card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductNavigationCard</h2><p>Reusable product navigation card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'productpageshell productpageshell layout reusable product page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductPageShell</h2><p>Reusable product page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'productselector productselector forms reusable product selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProductSelector</h2><p>Reusable product selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/products-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'productsmegamenu productsmegamenu overlays reusable products mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ProductsMegaMenu</h2><p>Reusable products mega menu component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'productstatusbadge productstatusbadge feedback reusable product status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ProductStatusBadge</h2><p>Reusable product status badge component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/product-use-case-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productusecaselist productusecaselist data reusable product use case list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductUseCaseList</h2><p>Reusable product use case list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'progress progress core reusable progress component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>progress</h2><p>Reusable progress component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/progress-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'progressbar progressbar core reusable progress bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ProgressBar</h2><p>Reusable progress bar component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/progress-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'progresschart progresschart visualization reusable progress chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProgressChart</h2><p>Reusable progress chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/progress-ring" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'progressring progressring visualization reusable progress ring component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProgressRing</h2><p>Reusable progress ring component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/progress-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'progressslider progressslider content reusable progress slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProgressSlider</h2><p>Reusable progress slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/project-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'projectcard projectcard content reusable project card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProjectCard</h2><p>Reusable project card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/project-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'projectselector projectselector forms reusable project selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProjectSelector</h2><p>Reusable project selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/project-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'projectswitcher projectswitcher content reusable project switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProjectSwitcher</h2><p>Reusable project switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/promo-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'promocodeinput promocodeinput forms reusable promo code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PromoCodeInput</h2><p>Reusable promo code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/prompt-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'promptdialog promptdialog overlays reusable prompt dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>PromptDialog</h2><p>Reusable prompt dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/provider-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'providerselector providerselector forms reusable provider selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProviderSelector</h2><p>Reusable provider selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/public-footer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicfooter publicfooter core reusable public footer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicFooter</h2><p>Reusable public footer component.</p><div class="component-card-meta"><span>37 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/public-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'publicheader publicheader layout reusable public header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PublicHeader</h2><p>Reusable public header component.</p><div class="component-card-meta"><span>30 props</span><span>2 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/public-header-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'publicheaderlogo publicheaderlogo content reusable public header logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PublicHeaderLogo</h2><p>Reusable public header logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/public-mobile-navigation" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicmobilenavigation publicmobilenavigation core reusable public mobile navigation component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicMobileNavigation</h2><p>Reusable public mobile navigation component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/public-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'publicpageshell publicpageshell layout reusable public page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PublicPageShell</h2><p>Reusable public page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/public-search" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicsearch publicsearch core reusable public search component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicSearch</h2><p>Reusable public search component.</p><div class="component-card-meta"><span>15 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/publish-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'publishdatetimepicker publishdatetimepicker forms reusable publish date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PublishDateTimePicker</h2><p>Reusable publish date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/push-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pushcomposer pushcomposer content reusable push composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PushComposer</h2><p>Reusable push composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/push-notification-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pushnotificationeditor pushnotificationeditor forms reusable push notification editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PushNotificationEditor</h2><p>Reusable push notification editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/qr-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'qrcode qrcode content reusable qr code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QrCode</h2><p>Reusable qr code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/quantity-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'quantityinput quantityinput forms reusable quantity input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>QuantityInput</h2><p>Reusable quantity input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/quantity-stepper" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'quantitystepper quantitystepper content reusable quantity stepper component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QuantityStepper</h2><p>Reusable quantity stepper component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/quiet-hours-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'quiethourspicker quiethourspicker forms reusable quiet hours picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>QuietHoursPicker</h2><p>Reusable quiet hours picker component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/quote-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'quotetext quotetext content reusable quote text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QuoteText</h2><p>Reusable quote text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'radio radio core reusable radio component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Radio</h2><p>Reusable radio component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/radio-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radiogroup radiogroup forms reusable radio group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RadioGroup</h2><p>Reusable radio group component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/range-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeinput rangeinput forms reusable range input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeInput</h2><p>Reusable range input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'rangeslider rangeslider content reusable range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RangeSlider</h2><p>Reusable range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rate-limited-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'ratelimitedstate ratelimitedstate feedback reusable rate limited state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RateLimitedState</h2><p>Reusable rate limited state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rate-limit-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'ratelimitinput ratelimitinput forms reusable rate limit input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RateLimitInput</h2><p>Reusable rate limit input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rate-limit-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'ratelimitpage ratelimitpage content reusable rate limit page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RateLimitPage</h2><p>Reusable rate limit page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rate-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'ratetable ratetable data reusable rate table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RateTable</h2><p>Reusable rate table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rating-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'ratingslider ratingslider content reusable rating slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RatingSlider</h2><p>Reusable rating slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/recipient-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recipientselector recipientselector forms reusable recipient selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecipientSelector</h2><p>Reusable recipient selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/recovery-code-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'recoverycodeform recoverycodeform content reusable recovery code form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RecoveryCodeForm</h2><p>Reusable recovery code form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/recovery-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recoverycodeinput recoverycodeinput forms reusable recovery code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecoveryCodeInput</h2><p>Reusable recovery code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/recurrence-rule-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'recurrencerulebuilder recurrencerulebuilder content reusable recurrence rule builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RecurrenceRuleBuilder</h2><p>Reusable recurrence rule builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/recurring-schedule-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recurringschedulepicker recurringschedulepicker forms reusable recurring schedule picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecurringSchedulePicker</h2><p>Reusable recurring schedule picker component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/redirect-uri-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'redirecturiinput redirecturiinput forms reusable redirect uri input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RedirectUriInput</h2><p>Reusable redirect uri input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/reference-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'referenceinput referenceinput forms reusable reference input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ReferenceInput</h2><p>Reusable reference input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/regex-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'regexinput regexinput forms reusable regex input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RegexInput</h2><p>Reusable regex input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/regional-privacy-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionalprivacybanner regionalprivacybanner feedback reusable regional privacy banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionalPrivacyBanner</h2><p>Reusable regional privacy banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/region-availability-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'regionavailabilitytable regionavailabilitytable data reusable region availability table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RegionAvailabilityTable</h2><p>Reusable region availability table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/region-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'regionselector regionselector forms reusable region selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RegionSelector</h2><p>Reusable region selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/region-unavailable-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionunavailablealert regionunavailablealert feedback reusable region unavailable alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionUnavailableAlert</h2><p>Reusable region unavailable alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/region-unavailable-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionunavailablestate regionunavailablestate feedback reusable region unavailable state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionUnavailableState</h2><p>Reusable region unavailable state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/reject-optional-cookies-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'rejectoptionalcookiesbutton rejectoptionalcookiesbutton actions reusable reject optional cookies button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>RejectOptionalCookiesButton</h2><p>Reusable reject optional cookies button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/reopen-cookie-settings-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'reopencookiesettingsbutton reopencookiesettingsbutton actions reusable reopen cookie settings button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ReopenCookieSettingsButton</h2><p>Reusable reopen cookie settings button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/report-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'reportcard reportcard content reusable report card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ReportCard</h2><p>Reusable report card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/request-response-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'requestresponseviewer requestresponseviewer content reusable request response viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RequestResponseViewer</h2><p>Reusable request response viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/request-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'requestviewer requestviewer content reusable request viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RequestViewer</h2><p>Reusable request viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/required-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'requiredindicator requiredindicator feedback reusable required indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RequiredIndicator</h2><p>Reusable required indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/reset-password-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resetpasswordform resetpasswordform content reusable reset password form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResetPasswordForm</h2><p>Reusable reset password form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resizable-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resizablepanel resizablepanel layout reusable resizable panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResizablePanel</h2><p>Reusable resizable panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resource-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcecard resourcecard content reusable resource card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceCard</h2><p>Reusable resource card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resource-download-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcedownloadcard resourcedownloadcard content reusable resource download card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceDownloadCard</h2><p>Reusable resource download card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resource-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resourcepageshell resourcepageshell layout reusable resource page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResourcePageShell</h2><p>Reusable resource page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resource-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcesearch resourcesearch content reusable resource search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceSearch</h2><p>Reusable resource search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resources-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'resourcesmegamenu resourcesmegamenu overlays reusable resources mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ResourcesMegaMenu</h2><p>Reusable resources mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/resource-type-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'resourcetypebadge resourcetypebadge feedback reusable resource type badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ResourceTypeBadge</h2><p>Reusable resource type badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/response-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'responseviewer responseviewer content reusable response viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResponseViewer</h2><p>Reusable response viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/responsible-disclosure-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'responsibledisclosurecta responsibledisclosurecta actions reusable responsible disclosure c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ResponsibleDisclosureCTA</h2><p>Reusable responsible disclosure c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/responsive-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'responsivetable responsivetable data reusable responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ResponsiveTable</h2><p>Reusable responsive table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/results-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resultssection resultssection layout reusable results section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResultsSection</h2><p>Reusable results section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/retention-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'retentiontable retentiontable data reusable retention table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RetentionTable</h2><p>Reusable retention table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/retry-count-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'retrycountinput retrycountinput forms reusable retry count input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RetryCountInput</h2><p>Reusable retry count input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/revenue-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'revenuechart revenuechart visualization reusable revenue chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>RevenueChart</h2><p>Reusable revenue chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rgb-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rgbcolorinput rgbcolorinput forms reusable rgb color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RgbColorInput</h2><p>Reusable rgb color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rich-text-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'richtexteditor richtexteditor forms reusable rich text editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RichTextEditor</h2><p>Reusable rich text editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rich-text-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'richtextinput richtextinput forms reusable rich text input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RichTextInput</h2><p>Reusable rich text input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/role-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'roleselector roleselector forms reusable role selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RoleSelector</h2><p>Reusable role selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/rolling-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rollingdaterangepicker rollingdaterangepicker forms reusable rolling date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RollingDateRangePicker</h2><p>Reusable rolling date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/save-cookie-preferences-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'savecookiepreferencesbutton savecookiepreferencesbutton actions reusable save cookie preferences button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SaveCookiePreferencesButton</h2><p>Reusable save cookie preferences button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/saved-filter-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'savedfilterselector savedfilterselector forms reusable saved filter selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SavedFilterSelector</h2><p>Reusable saved filter selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/scheduled-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'scheduleddatetimepicker scheduleddatetimepicker forms reusable scheduled date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ScheduledDateTimePicker</h2><p>Reusable scheduled date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/schedule-message-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'schedulemessagepicker schedulemessagepicker forms reusable schedule message picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ScheduleMessagePicker</h2><p>Reusable schedule message picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/schedule-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'schedulepicker schedulepicker forms reusable schedule picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SchedulePicker</h2><p>Reusable schedule picker component.</p><div class="component-card-meta"><span>2 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/screenshot-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'screenshotframe screenshotframe layout reusable screenshot frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ScreenshotFrame</h2><p>Reusable screenshot frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/scroll-area" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'scrollarea scrollarea core reusable scroll area component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ScrollArea</h2><p>Reusable scroll area component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sdkcard" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sdkcard sdkcard content reusable s d k card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SDKCard</h2><p>Reusable s d k card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sdk-language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'sdklanguageselector sdklanguageselector forms reusable sdk language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SdkLanguageSelector</h2><p>Reusable sdk language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sdklanguage-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sdklanguagetabs sdklanguagetabs content reusable s d k language tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SDKLanguageTabs</h2><p>Reusable s d k language tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sdktabs" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sdktabs sdktabs core reusable sdktabs component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SDKTabs</h2><p>Reusable sdktabs component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'searchbutton searchbutton actions reusable search button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SearchButton</h2><p>Reusable search button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-category-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'searchcategorytabs searchcategorytabs content reusable search category tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SearchCategoryTabs</h2><p>Reusable search category tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'searchdialog searchdialog overlays reusable search dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SearchDialog</h2><p>Reusable search dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'searchemptystate searchemptystate feedback reusable search empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SearchEmptyState</h2><p>Reusable search empty state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'searchinput searchinput forms reusable search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SearchInput</h2><p>Reusable search input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-loading-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'searchloadingstate searchloadingstate feedback reusable search loading state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SearchLoadingState</h2><p>Reusable search loading state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/search-result-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'searchresultitem searchresultitem content reusable search result item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SearchResultItem</h2><p>Reusable search result item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/secondary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'secondarybutton secondarybutton actions reusable secondary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SecondaryButton</h2><p>Reusable secondary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/second-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'secondpicker secondpicker forms reusable second picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SecondPicker</h2><p>Reusable second picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/secret-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'secretdisplay secretdisplay content reusable secret display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecretDisplay</h2><p>Reusable secret display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/secret-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'secretinput secretinput forms reusable secret input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SecretInput</h2><p>Reusable secret input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/secret-reveal-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'secretrevealdialog secretrevealdialog overlays reusable secret reveal dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SecretRevealDialog</h2><p>Reusable secret reveal dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'section section layout reusable section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Section</h2><p>Reusable section component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/section-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'sectionactions sectionactions actions reusable section actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SectionActions</h2><p>Reusable section actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sectionheader sectionheader layout reusable section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SectionHeader</h2><p>Reusable section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/section-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sectionheading sectionheading core reusable section heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SectionHeading</h2><p>Reusable section heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'securityalert securityalert feedback reusable security alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SecurityAlert</h2><p>Reusable security alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-contact-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securitycontactcard securitycontactcard content reusable security contact card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityContactCard</h2><p>Reusable security contact card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-feature-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securityfeaturecard securityfeaturecard content reusable security feature card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityFeatureCard</h2><p>Reusable security feature card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'securityhero securityhero layout reusable security hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SecurityHero</h2><p>Reusable security hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-pillar-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'securitypillargrid securitypillargrid data reusable security pillar grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SecurityPillarGrid</h2><p>Reusable security pillar grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-practice-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'securitypracticelist securitypracticelist data reusable security practice list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SecurityPracticeList</h2><p>Reusable security practice list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/security-report-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securityreportform securityreportform content reusable security report form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityReportForm</h2><p>Reusable security report form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/segmented-button-group" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'segmentedbuttongroup segmentedbuttongroup core reusable segmented button group component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SegmentedButtonGroup</h2><p>Reusable segmented button group component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'select select core reusable select component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Select</h2><p>Reusable select component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sender-id-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'senderidinput senderidinput forms reusable sender id input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SenderIdInput</h2><p>Reusable sender id input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/server-error-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'servererrorpage servererrorpage content reusable server error page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ServerErrorPage</h2><p>Reusable server error page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/service-level-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'serviceleveltable serviceleveltable data reusable service level table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceLevelTable</h2><p>Reusable service level table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/service-status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'servicestatusbadge servicestatusbadge feedback reusable service status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ServiceStatusBadge</h2><p>Reusable service status badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/service-status-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'servicestatuslist servicestatuslist data reusable service status list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceStatusList</h2><p>Reusable service status list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/service-status-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'servicestatusrow servicestatusrow data reusable service status row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceStatusRow</h2><p>Reusable service status row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/session-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sessioncard sessioncard content reusable session card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SessionCard</h2><p>Reusable session card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/session-expired-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'sessionexpireddialog sessionexpireddialog overlays reusable session expired dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SessionExpiredDialog</h2><p>Reusable session expired dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/setup-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'setupchecklist setupchecklist content reusable setup checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SetupChecklist</h2><p>Reusable setup checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/severity-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'severityselector severityselector forms reusable severity selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SeveritySelector</h2><p>Reusable severity selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/shadow-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'shadowpicker shadowpicker forms reusable shadow picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ShadowPicker</h2><p>Reusable shadow picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/share-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'shareaction shareaction actions reusable share action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ShareAction</h2><p>Reusable share action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/share-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'sharebutton sharebutton actions reusable share button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ShareButton</h2><p>Reusable share button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sidebar-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sidebarlayout sidebarlayout layout reusable sidebar layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SidebarLayout</h2><p>Reusable sidebar layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/side-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sidepanel sidepanel layout reusable side panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SidePanel</h2><p>Reusable side panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sign-in-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'signinform signinform content reusable sign in form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SignInForm</h2><p>Reusable sign in form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sign-in-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'signinlink signinlink actions reusable sign in link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SignInLink</h2><p>Reusable sign in link component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sign-up-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'signupform signupform content reusable sign up form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SignUpForm</h2><p>Reusable sign up form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/site-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sitesearch sitesearch content reusable site search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SiteSearch</h2><p>Reusable site search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'skeleton skeleton feedback reusable skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Skeleton</h2><p>Reusable skeleton component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/skip-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'skiplink skiplink actions reusable skip link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SkipLink</h2><p>Reusable skip link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sla-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'slatable slatable data reusable sla table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SlaTable</h2><p>Reusable sla table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'slider slider content reusable slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Slider</h2><p>Reusable slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/slug-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'sluginput sluginput forms reusable slug input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SlugInput</h2><p>Reusable slug input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/small-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'smalltext smalltext content reusable small text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SmallText</h2><p>Reusable small text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/smart-route-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'smartroutediagram smartroutediagram visualization reusable smart route diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>SmartRouteDiagram</h2><p>Reusable smart route diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sms-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'smscomposer smscomposer content reusable sms composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SmsComposer</h2><p>Reusable sms composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sms-message-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'smsmessageeditor smsmessageeditor forms reusable sms message editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SmsMessageEditor</h2><p>Reusable sms message editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sms-segment-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'smssegmentcounter smssegmentcounter feedback reusable sms segment counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SmsSegmentCounter</h2><p>Reusable sms segment counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/social-share" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'socialshare socialshare core reusable social share component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SocialShare</h2><p>Reusable social share component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/solution-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionhero solutionhero layout reusable solution hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionHero</h2><p>Reusable solution hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/solution-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionpageshell solutionpageshell layout reusable solution page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionPageShell</h2><p>Reusable solution page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/solution-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionsection solutionsection layout reusable solution section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionSection</h2><p>Reusable solution section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/solutions-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'solutionsmegamenu solutionsmegamenu overlays reusable solutions mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SolutionsMegaMenu</h2><p>Reusable solutions mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sortable-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'sortabletable sortabletable data reusable sortable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SortableTable</h2><p>Reusable sortable table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/spacer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'spacer spacer core reusable spacer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>spacer</h2><p>Reusable spacer component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/spinner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'spinner spinner core reusable spinner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Spinner</h2><p>Reusable spinner component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/split-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'splitbutton splitbutton actions reusable split button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SplitButton</h2><p>Reusable split button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/split-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'splitcta splitcta actions reusable split c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SplitCTA</h2><p>Reusable split c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/split-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splithero splithero layout reusable split hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitHero</h2><p>Reusable split hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/split-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splitlayout splitlayout layout reusable split layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitLayout</h2><p>Reusable split layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/split-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splitsectionheader splitsectionheader layout reusable split section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitSectionHeader</h2><p>Reusable split section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/stack" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'stack stack core reusable stack component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Stack</h2><p>Reusable stack component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/start-free-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'startfreebutton startfreebutton actions reusable start free button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>StartFreeButton</h2><p>Reusable start free button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/stat-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'statcard statcard content reusable stat card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>StatCard</h2><p>Reusable stat card component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/state-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stateselector stateselector forms reusable state selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StateSelector</h2><p>Reusable state selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'statusbadge statusbadge feedback reusable status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>StatusBadge</h2><p>Reusable status badge component.</p><div class="component-card-meta"><span>2 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/status-banner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'statusbanner statusbanner core reusable status banner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>StatusBanner</h2><p>Reusable status banner component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/status-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'statuspageshell statuspageshell layout reusable status page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StatusPageShell</h2><p>Reusable status page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/status-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'statusselector statusselector forms reusable status selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StatusSelector</h2><p>Reusable status selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/status-subscribe-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'statussubscribeform statussubscribeform content reusable status subscribe form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>StatusSubscribeForm</h2><p>Reusable status subscribe form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/status-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'statustable statustable data reusable status table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>StatusTable</h2><p>Reusable status table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/step-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'stepnavigation stepnavigation layout reusable step navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StepNavigation</h2><p>Reusable step navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'stepper stepper content reusable stepper component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Stepper</h2><p>Reusable stepper component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/stepper-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stepperinput stepperinput forms reusable stepper input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StepperInput</h2><p>Reusable stepper input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/step-up-authentication-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'stepupauthenticationdialog stepupauthenticationdialog overlays reusable step up authentication dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>StepUpAuthenticationDialog</h2><p>Reusable step up authentication dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sticker-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stickerpicker stickerpicker forms reusable sticker picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StickerPicker</h2><p>Reusable sticker picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sticky" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sticky sticky core reusable sticky component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Sticky</h2><p>Reusable sticky component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sticky-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'stickylayout stickylayout layout reusable sticky layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StickyLayout</h2><p>Reusable sticky layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/street-address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'streetaddressinput streetaddressinput forms reusable street address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StreetAddressInput</h2><p>Reusable street address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/subdomain-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'subdomaininput subdomaininput forms reusable subdomain input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SubdomainInput</h2><p>Reusable subdomain input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/subject-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'subjectinput subjectinput forms reusable subject input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SubjectInput</h2><p>Reusable subject input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/subprocessor-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'subprocessortable subprocessortable data reusable subprocessor table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SubprocessorTable</h2><p>Reusable subprocessor table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/subsection-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'subsectionheading subsectionheading core reusable subsection heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SubsectionHeading</h2><p>Reusable subsection heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/success-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'successcard successcard content reusable success card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SuccessCard</h2><p>Reusable success card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/success-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'successstate successstate feedback reusable success state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SuccessState</h2><p>Reusable success state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/support-request-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'supportrequestform supportrequestform content reusable support request form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SupportRequestForm</h2><p>Reusable support request form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/surface" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'surface surface core reusable surface component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Surface</h2><p>Reusable surface component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'switch switch core reusable switch component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Switch</h2><p>Reusable switch component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'table table data reusable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>Table</h2><p>Reusable table component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/table-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'tableheader tableheader layout reusable table header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>TableHeader</h2><p>Reusable table header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/table-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'tablerow tablerow data reusable table row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TableRow</h2><p>Reusable table row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/table-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'tableskeleton tableskeleton feedback reusable table skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TableSkeleton</h2><p>Reusable table skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'tabs tabs content reusable tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Tabs</h2><p>Reusable tabs component.</p><div class="component-card-meta"><span>2 props</span><span>2 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tag" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'tag tag core reusable tag component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>tag</h2><p>Reusable tag component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tag-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'taginput taginput forms reusable tag input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TagInput</h2><p>Reusable tag input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tax-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'taxnotice taxnotice feedback reusable tax notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TaxNotice</h2><p>Reusable tax notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tax-rate-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'taxrateinput taxrateinput forms reusable tax rate input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TaxRateInput</h2><p>Reusable tax rate input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/team-member-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'teammembercard teammembercard content reusable team member card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TeamMemberCard</h2><p>Reusable team member card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/team-size-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'teamsizeselector teamsizeselector forms reusable team size selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TeamSizeSelector</h2><p>Reusable team size selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/template-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'templatecard templatecard content reusable template card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TemplateCard</h2><p>Reusable template card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/template-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'templateselector templateselector forms reusable template selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TemplateSelector</h2><p>Reusable template selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/template-variable-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'templatevariableinput templatevariableinput forms reusable template variable input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TemplateVariableInput</h2><p>Reusable template variable input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tenant-isolation-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'tenantisolationdiagram tenantisolationdiagram visualization reusable tenant isolation diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>TenantIsolationDiagram</h2><p>Reusable tenant isolation diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/terminal-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'terminalblock terminalblock content reusable terminal block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TerminalBlock</h2><p>Reusable terminal block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tertiary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'tertiarybutton tertiarybutton actions reusable tertiary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>TertiaryButton</h2><p>Reusable tertiary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/testimonial-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'testimonialcard testimonialcard content reusable testimonial card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TestimonialCard</h2><p>Reusable testimonial card component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/testimonial-carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'testimonialcarousel testimonialcarousel content reusable testimonial carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TestimonialCarousel</h2><p>Reusable testimonial carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/test-message-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'testmessagedialog testmessagedialog overlays reusable test message dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>TestMessageDialog</h2><p>Reusable test message dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'textarea textarea core reusable textarea component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Textarea</h2><p>Reusable textarea component.</p><div class="component-card-meta"><span>11 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/text-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textinput textinput forms reusable text input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TextInput</h2><p>Reusable text input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/text-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'textlink textlink actions reusable text link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>TextLink</h2><p>Reusable text link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/text-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'textskeleton textskeleton feedback reusable text skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TextSkeleton</h2><p>Reusable text skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/theme-toggle" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'theme-toggle theme-toggle core reusable theme-toggle component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>theme-toggle</h2><p>Reusable theme-toggle component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/theme-color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'themecolorpicker themecolorpicker forms reusable theme color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ThemeColorPicker</h2><p>Reusable theme color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/theme-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'themeswitcher themeswitcher content reusable theme switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ThemeSwitcher</h2><p>Reusable theme switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/time-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timeinput timeinput forms reusable time input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeInput</h2><p>Reusable time input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'timeline timeline visualization reusable timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>Timeline</h2><p>Reusable timeline component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timeline-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'timelinechart timelinechart visualization reusable timeline chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>TimelineChart</h2><p>Reusable timeline chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timeline-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'timelineitem timelineitem content reusable timeline item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TimelineItem</h2><p>Reusable timeline item component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timeout-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timeoutinput timeoutinput forms reusable timeout input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeoutInput</h2><p>Reusable timeout input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms reusable time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Reusable time picker component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/time-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timerangepicker timerangepicker forms reusable time range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeRangePicker</h2><p>Reusable time range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timezone-aware-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timezoneawaretimepicker timezoneawaretimepicker forms reusable timezone aware time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimezoneAwareTimePicker</h2><p>Reusable timezone aware time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timezone-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timezoneselector timezoneselector forms reusable timezone selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimezoneSelector</h2><p>Reusable timezone selector component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'toast toast core reusable toast component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Toast</h2><p>Reusable toast component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'toastaction toastaction actions reusable toast action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ToastAction</h2><p>Reusable toast action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast-host" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'toasthost toasthost core reusable toast host component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ToastHost</h2><p>Reusable toast host component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'toasticon toasticon content reusable toast icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ToastIcon</h2><p>Reusable toast icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'toastprogress toastprogress visualization reusable toast progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ToastProgress</h2><p>Reusable toast progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'toggle toggle forms reusable toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Toggle</h2><p>Reusable toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toggle-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'togglegroup togglegroup forms reusable toggle group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ToggleGroup</h2><p>Reusable toggle group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/token-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'tokeninput tokeninput forms reusable token input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TokenInput</h2><p>Reusable token input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'tooltip tooltip content reusable tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Tooltip</h2><p>Reusable tooltip component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/totp-verification-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'totpverificationform totpverificationform content reusable totp verification form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TotpVerificationForm</h2><p>Reusable totp verification form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/translated-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'translatedtext translatedtext content reusable translated text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TranslatedText</h2><p>Reusable translated text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tree-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'treetable treetable data reusable tree table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TreeTable</h2><p>Reusable tree table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/trend-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'trendindicator trendindicator feedback reusable trend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TrendIndicator</h2><p>Reusable trend indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/truncated-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'truncatedtext truncatedtext content reusable truncated text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TruncatedText</h2><p>Reusable truncated text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/trust-badge-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'trustbadgelist trustbadgelist data reusable trust badge list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TrustBadgeList</h2><p>Reusable trust badge list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'typography typography core reusable typography component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Typography</h2><p>Reusable typography component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/unavailable-region-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'unavailableregionstate unavailableregionstate feedback reusable unavailable region state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>UnavailableRegionState</h2><p>Reusable unavailable region state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/unified-timeline-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'unifiedtimelinepreview unifiedtimelinepreview content reusable unified timeline preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UnifiedTimelinePreview</h2><p>Reusable unified timeline preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/unsaved-changes-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'unsavedchangesdialog unsavedchangesdialog overlays reusable unsaved changes dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>UnsavedChangesDialog</h2><p>Reusable unsaved changes dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/upload-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'uploaditem uploaditem content reusable upload item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UploadItem</h2><p>Reusable upload item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/upload-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'uploadpreview uploadpreview content reusable upload preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UploadPreview</h2><p>Reusable upload preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/upload-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uploadprogress uploadprogress visualization reusable upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UploadProgress</h2><p>Reusable upload progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/uptime-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uptimechart uptimechart visualization reusable uptime chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UptimeChart</h2><p>Reusable uptime chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/uptime-metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uptimemetric uptimemetric visualization reusable uptime metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UptimeMetric</h2><p>Reusable uptime metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'urlinput urlinput forms reusable url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UrlInput</h2><p>Reusable url input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/usage-pricing-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'usagepricingtable usagepricingtable data reusable usage pricing table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>UsagePricingTable</h2><p>Reusable usage pricing table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/use-case-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'usecaseselector usecaseselector forms reusable use case selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UseCaseSelector</h2><p>Reusable use case selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/user-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'usercard usercard content reusable user card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UserCard</h2><p>Reusable user card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/username-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'usernameinput usernameinput forms reusable username input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UsernameInput</h2><p>Reusable username input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/value-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'valuecard valuecard content reusable value card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ValueCard</h2><p>Reusable value card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/values-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'valuesgrid valuesgrid data reusable values grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ValuesGrid</h2><p>Reusable values grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/verification-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'verificationcodeinput verificationcodeinput forms reusable verification code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VerificationCodeInput</h2><p>Reusable verification code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/verified-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'verifiedbadge verifiedbadge feedback reusable verified badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>VerifiedBadge</h2><p>Reusable verified badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/version-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'versionselector versionselector forms reusable version selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VersionSelector</h2><p>Reusable version selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/vertical-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'verticaltabs verticaltabs content reusable vertical tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VerticalTabs</h2><p>Reusable vertical tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/video-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'videocard videocard content reusable video card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VideoCard</h2><p>Reusable video card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/video-preview-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'videopreviewdialog videopreviewdialog overlays reusable video preview dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>VideoPreviewDialog</h2><p>Reusable video preview dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/video-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'videoupload videoupload content reusable video upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VideoUpload</h2><p>Reusable video upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/virtualized-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'virtualizedtable virtualizedtable data reusable virtualized table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>VirtualizedTable</h2><p>Reusable virtualized table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/vision-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'visionsection visionsection layout reusable vision section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>VisionSection</h2><p>Reusable vision section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/visually-hidden" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'visuallyhidden visuallyhidden core reusable visually hidden component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>VisuallyHidden</h2><p>Reusable visually hidden component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/voice-script-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'voicescriptcomposer voicescriptcomposer content reusable voice script composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VoiceScriptComposer</h2><p>Reusable voice script composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/voice-script-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'voicescripteditor voicescripteditor forms reusable voice script editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VoiceScriptEditor</h2><p>Reusable voice script editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/volume-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'volumeinput volumeinput forms reusable volume input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VolumeInput</h2><p>Reusable volume input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/volume-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'volumeslider volumeslider content reusable volume slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VolumeSlider</h2><p>Reusable volume slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/warning-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'warningcard warningcard content reusable warning card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WarningCard</h2><p>Reusable warning card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/webhook-event-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webhookeventcard webhookeventcard content reusable webhook event card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebhookEventCard</h2><p>Reusable webhook event card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/webhook-flow-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'webhookflowdiagram webhookflowdiagram visualization reusable webhook flow diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>WebhookFlowDiagram</h2><p>Reusable webhook flow diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/webhook-payload-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webhookpayloadviewer webhookpayloadviewer content reusable webhook payload viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebhookPayloadViewer</h2><p>Reusable webhook payload viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/webhook-url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'webhookurlinput webhookurlinput forms reusable webhook url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WebhookUrlInput</h2><p>Reusable webhook url input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/webinar-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webinarcard webinarcard content reusable webinar card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebinarCard</h2><p>Reusable webinar card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/webinar-registration-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webinarregistrationform webinarregistrationform content reusable webinar registration form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebinarRegistrationForm</h2><p>Reusable webinar registration form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/well" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'well well core reusable well component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Well</h2><p>Reusable well component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/whats-app-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'whatsappcomposer whatsappcomposer content reusable whats app composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WhatsAppComposer</h2><p>Reusable whats app composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/whats-app-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'whatsappnumberinput whatsappnumberinput forms reusable whats app number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WhatsAppNumberInput</h2><p>Reusable whats app number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/whats-app-template-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'whatsapptemplateeditor whatsapptemplateeditor forms reusable whats app template editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WhatsAppTemplateEditor</h2><p>Reusable whats app template editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/wide-container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'widecontainer widecontainer core reusable wide container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>WideContainer</h2><p>Reusable wide container component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/wizard" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'wizard wizard content reusable wizard component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Wizard</h2><p>Reusable wizard component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/wizard-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'wizardheader wizardheader layout reusable wizard header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>WizardHeader</h2><p>Reusable wizard header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/wizard-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'wizardnavigation wizardnavigation layout reusable wizard navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>WizardNavigation</h2><p>Reusable wizard navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/workflow-canvas-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workflowcanvaspreview workflowcanvaspreview content reusable workflow canvas preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkflowCanvasPreview</h2><p>Reusable workflow canvas preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/workflow-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'workflowprogress workflowprogress visualization reusable workflow progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>WorkflowProgress</h2><p>Reusable workflow progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/workspace-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workspacecard workspacecard content reusable workspace card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkspaceCard</h2><p>Reusable workspace card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/workspace-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'workspaceselector workspaceselector forms reusable workspace selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WorkspaceSelector</h2><p>Reusable workspace selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/workspace-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workspaceswitcher workspaceswitcher content reusable workspace switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkspaceSwitcher</h2><p>Reusable workspace switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/year-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'yearpicker yearpicker forms reusable year picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>YearPicker</h2><p>Reusable year picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/zoom-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'zoomslider zoomslider content reusable zoom slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ZoomSlider</h2><p>Reusable zoom slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a></section></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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>
+      <main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 85 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>85</span></button><button type="button" @click="category = 'advanced-forms'">Advanced-forms<span>9</span></button><button type="button" @click="category = 'base'">Base<span>27</span></button><button type="button" @click="category = 'forms'">Forms<span>11</span></button><button type="button" @click="category = 'integrations'">Integrations<span>12</span></button><button type="button" @click="category = 'layout'">Layout<span>10</span></button><button type="button" @click="category = 'navigation'">Navigation<span>9</span></button><button type="button" @click="category = 'overlays'">Overlays<span>6</span></button><button type="button" @click="category = 'tables'">Tables<span>1</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'accordion accordion base theme-aware, responsive accordion component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/advanced-date-picker" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advanceddatepicker advanceddatepicker integrations theme-aware, responsive advanced date picker component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedDatePicker</h2><p>Theme-aware, responsive advanced date picker component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/advanced-range-slider" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advancedrangeslider advancedrangeslider integrations theme-aware, responsive advanced range slider component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedRangeSlider</h2><p>Theme-aware, responsive advanced range slider component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/advanced-select" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'advancedselect advancedselect advanced-forms theme-aware, responsive advanced select component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>AdvancedSelect</h2><p>Theme-aware, responsive advanced select component.</p><div class="component-card-meta"><span>51 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'alert alert base theme-aware, responsive alert component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatar avatar base theme-aware, responsive avatar component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatargroup avatargroup base theme-aware, responsive avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>AvatarGroup</h2><p>Theme-aware, responsive avatar group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'badge badge base theme-aware, responsive badge component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/blockquote" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'blockquote blockquote base theme-aware, responsive blockquote component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/breadcrumb" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'breadcrumb breadcrumb navigation theme-aware, responsive breadcrumb component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'button button base theme-aware, responsive button component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p><div class="component-card-meta"><span>25 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'buttongroup buttongroup base theme-aware, responsive button group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ButtonGroup</h2><p>Theme-aware, responsive button group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'card card base theme-aware, responsive card component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'carousel carousel base theme-aware, responsive carousel component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/chart" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'chart chart integrations theme-aware, responsive chart component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/chat-bubble" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'chatbubble chatbubble base theme-aware, responsive chat bubble component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ChatBubble</h2><p>Theme-aware, responsive chat bubble component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkbox checkbox forms theme-aware, responsive checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/clipboard" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'clipboard clipboard integrations theme-aware, responsive clipboard component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Clipboard</h2><p>Theme-aware, responsive clipboard component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/collapse" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'collapse collapse base theme-aware, responsive collapse component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms theme-aware, responsive color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Theme-aware, responsive color picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/columns" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'columns columns layout theme-aware, responsive columns component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Columns</h2><p>Theme-aware, responsive columns component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/combo-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'combobox combobox advanced-forms editable autocomplete combobox with local and remote suggestions.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ComboBox</h2><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="component-card-meta"><span>41 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/confetti" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'confetti confetti integrations theme-aware, responsive confetti component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Confetti</h2><p>Theme-aware, responsive confetti component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'container container layout theme-aware, responsive container component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Container</h2><p>Theme-aware, responsive container component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays theme-aware, responsive context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Theme-aware, responsive context menu component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/copy-markup" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'copymarkup copymarkup advanced-forms theme-aware, responsive copy markup component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>CopyMarkup</h2><p>Theme-aware, responsive copy markup component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/custom-scrollbar" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'customscrollbar customscrollbar layout theme-aware, responsive custom scrollbar component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CustomScrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/data-map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datamap datamap integrations theme-aware, responsive data map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataMap</h2><p>Theme-aware, responsive data map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datatable datatable integrations theme-aware, responsive data table component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataTable</h2><p>Theme-aware, responsive data table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'datepicker datepicker base theme-aware, responsive date picker component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DatePicker</h2><p>Theme-aware, responsive date picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/device-frame" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'deviceframe deviceframe base theme-aware, responsive device frame component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DeviceFrame</h2><p>Theme-aware, responsive device frame component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'divider divider layout theme-aware, responsive divider component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Divider</h2><p>Theme-aware, responsive divider component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/drag-and-drop" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'draganddrop draganddrop integrations theme-aware, responsive drag and drop component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DragAndDrop</h2><p>Theme-aware, responsive drag and drop component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'drawer drawer overlays theme-aware, responsive drawer component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Drawer</h2><p>Theme-aware, responsive drawer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/dropdown" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdown dropdown overlays theme-aware, responsive dropdown component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms theme-aware, responsive file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Theme-aware, responsive file input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'fileupload fileupload integrations theme-aware, responsive file upload component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>FileUpload</h2><p>Theme-aware, responsive file upload component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-upload-progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'fileuploadprogress fileuploadprogress base theme-aware, responsive file upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>FileUploadProgress</h2><p>Theme-aware, responsive file upload progress component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'grid grid layout theme-aware, responsive grid component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Grid</h2><p>Theme-aware, responsive grid component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/image" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'image image layout theme-aware, responsive image component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p><div class="component-card-meta"><span>9 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'input input forms theme-aware, responsive input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms theme-aware, responsive input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Theme-aware, responsive input group component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/input-number" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'inputnumber inputnumber advanced-forms theme-aware, responsive input number component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>InputNumber</h2><p>Theme-aware, responsive input number component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/kbd" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'kbd kbd layout theme-aware, responsive kbd component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/layout-splitter" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'layoutsplitter layoutsplitter layout theme-aware, responsive layout splitter component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LayoutSplitter</h2><p>Theme-aware, responsive layout splitter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legend-indicator" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'legendindicator legendindicator base theme-aware, responsive legend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>LegendIndicator</h2><p>Theme-aware, responsive legend indicator component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'link link layout theme-aware, responsive link component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'list list base theme-aware, responsive list component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>List</h2><p>Theme-aware, responsive list component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/list-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'listgroup listgroup base theme-aware, responsive list group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ListGroup</h2><p>Theme-aware, responsive list group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'map map integrations theme-aware, responsive map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Map</h2><p>Theme-aware, responsive map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/marquee" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'marquee marquee base theme-aware, responsive marquee component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'megamenu megamenu navigation theme-aware, responsive mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>MegaMenu</h2><p>Theme-aware, responsive mega menu component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'modal modal overlays theme-aware, responsive modal component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Modal</h2><p>Theme-aware, responsive modal component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/nav" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'nav nav navigation theme-aware, responsive nav component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/navbar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'navbar navbar navigation theme-aware, responsive navbar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'pagination pagination navigation theme-aware, responsive pagination component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pin-input" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'pininput pininput advanced-forms secure multi-cell pin and verification-code input with regex and paste support.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>PinInput</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays theme-aware, responsive popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Theme-aware, responsive popover component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'progress progress base theme-aware, responsive progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Progress</h2><p>Theme-aware, responsive progress component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radio radio forms theme-aware, responsive radio component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeslider rangeslider forms theme-aware, responsive range slider component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeSlider</h2><p>Theme-aware, responsive range slider component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rating" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'rating rating base theme-aware, responsive rating component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/scrollspy" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'scrollspy scrollspy navigation theme-aware, responsive scrollspy component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'searchbox searchbox advanced-forms theme-aware, responsive search box component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>SearchBox</h2><p>Theme-aware, responsive search box component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'select select forms theme-aware, responsive select component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sidebar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'sidebar sidebar navigation theme-aware, responsive sidebar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'skeleton skeleton base theme-aware, responsive skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/spinner" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'spinner spinner base theme-aware, responsive spinner component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'stepper stepper navigation theme-aware, responsive stepper component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/strong-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'strongpassword strongpassword advanced-forms theme-aware, responsive strong password component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>StrongPassword</h2><p>Theme-aware, responsive strong password component.</p><div class="component-card-meta"><span>27 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/styled-icon" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'styledicon styledicon base theme-aware, responsive styled icon component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>StyledIcon</h2><p>Theme-aware, responsive styled icon component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'switch switch forms theme-aware, responsive switch component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'tables') ? (query === '' ? true : 'table table tables theme-aware, responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">tables</span><h2>Table</h2><p>Theme-aware, responsive table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'tabs tabs navigation theme-aware, responsive tabs component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textarea textarea forms theme-aware, responsive textarea component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'timeline timeline base theme-aware, responsive timeline component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms theme-aware, responsive time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Theme-aware, responsive time picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'toast toast base theme-aware, responsive toast component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast-notifications" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'toastnotifications toastnotifications integrations theme-aware, responsive toast notifications component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>ToastNotifications</h2><p>Theme-aware, responsive toast notifications component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toggle-count" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglecount togglecount advanced-forms theme-aware, responsive toggle count component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ToggleCount</h2><p>Theme-aware, responsive toggle count component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toggle-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglepassword togglepassword advanced-forms accessible password field with optional show and hide controls.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>TogglePassword</h2><p>Accessible password field with optional show and hide controls.</p><div class="component-card-meta"><span>24 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'tooltip tooltip overlays theme-aware, responsive tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Tooltip</h2><p>Theme-aware, responsive tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tree-view" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'treeview treeview base theme-aware, responsive tree view component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>TreeView</h2><p>Theme-aware, responsive tree view component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'typography typography layout theme-aware, responsive typography component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Typography</h2><p>Theme-aware, responsive typography component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/wysiwyg-editor" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'wysiwygeditor wysiwygeditor integrations theme-aware, responsive wysiwyg editor component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>WysiwygEditor</h2><p>Theme-aware, responsive wysiwyg editor component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a></section></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.5</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>
   }
diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn
index 2923f551..a425f5ae 100644
--- a/app/pages/components/accordion.wrn
+++ b/app/pages/components/accordion.wrn
@@ -1,7 +1,7 @@
 page Accordioncomponent {
   seo {
     title = "Accordion component"
-    description = "Reusable accordion component."
+    description = "Theme-aware, responsive accordion component."
   }
 
   view {
@@ -10,45 +10,34 @@ 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.4</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.3.5</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">content component</span><h1>Accordion</h1><p>Reusable accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 props</span><span>1 slots</span><span>1 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
-  title=&quot;Question&quot;
-  open=&quot;false&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Accordion&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>class</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;Question&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Accordion.wrn</code></p><pre data-language="wrn"><code>component Accordion &#123;
-    props &#123;
-        class = &quot;&quot;
-        title = &quot;Question&quot;
-        open = false
-    &#125;
-
-    state expanded = open
-
-    view &#123;
-        &lt;div class=&quot;border-b border-slate-200 dark:border-slate-800 &#123;class&#125;&quot; &gt;
-        &lt;button
-                type=&quot;button&quot;
-                class=&quot;flex w-full items-center justify-between gap-4 py-5 text-left font-semibold&quot;
-                aria-expanded=&quot;&#123;expanded&#125;&quot;
-                @click=&quot;expanded = !expanded&quot;
-            &gt;
-        &lt;span &gt;
-                    &#123;title&#125;
-                &lt;/span&gt;
-        &lt;span class=&quot;text-xl transition-transform &#123;expanded ? 'rotate-45' : ''&#125;&quot;&gt;+&lt;/span&gt;
-        &lt;/button&gt;
-        &lt;div
-                data-show=&quot;expanded&quot;
-                class=&quot;pb-5 text-slate-600 dark:text-slate-300&quot;
-            &gt;
-        &lt;slot /&gt;
-        &lt;/div&gt;
+      <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.5</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;
+  multiple=&quot;false&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Accordion&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>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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>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/Accordion.wrn</code></p><pre data-language="wrn"><code>component Accordion &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    items = []
+    multiple = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--accordion &#123;class&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;details open=&quot;&#123;item.open&#125;&quot;&gt;
+        &lt;summary&gt;&#123;item.label&#125;&lt;/summary&gt;
+        &lt;div&gt;&#123;item.content&#125;&lt;/div&gt;
+        &lt;/details&gt;&#123;/each&#125;
+      &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/advanced-date-picker.wrn b/app/pages/components/advanced-date-picker.wrn
new file mode 100644
index 00000000..38119e14
--- /dev/null
+++ b/app/pages/components/advanced-date-picker.wrn
@@ -0,0 +1,46 @@
+page AdvancedDatePickercomponent {
+  seo {
+    title = "AdvancedDatePicker component"
+    description = "Theme-aware, responsive advanced date picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AdvancedDatePicker&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;Advanced Date Picker&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/AdvancedDatePicker.wrn</code></p><pre data-language="wrn"><code>component AdvancedDatePicker &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Advanced Date Picker&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--advanced-date-picker wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/advanced-range-slider.wrn b/app/pages/components/advanced-range-slider.wrn
new file mode 100644
index 00000000..f1807831
--- /dev/null
+++ b/app/pages/components/advanced-range-slider.wrn
@@ -0,0 +1,46 @@
+page AdvancedRangeSlidercomponent {
+  seo {
+    title = "AdvancedRangeSlider component"
+    description = "Theme-aware, responsive advanced range slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AdvancedRangeSlider&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;Advanced Range Slider&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/AdvancedRangeSlider.wrn</code></p><pre data-language="wrn"><code>component AdvancedRangeSlider &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Advanced Range Slider&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--advanced-range-slider wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/advanced-select.wrn b/app/pages/components/advanced-select.wrn
new file mode 100644
index 00000000..c7311c9b
--- /dev/null
+++ b/app/pages/components/advanced-select.wrn
@@ -0,0 +1,493 @@
+page AdvancedSelectcomponent {
+  seo {
+    title = "AdvancedSelect component"
+    description = "Theme-aware, responsive advanced select component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  name=&quot;name&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AdvancedSelect&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;Advanced 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>values</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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;Select an option&quot;</code></td></tr><tr><td><code>placeholderIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>searchPlaceholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search options…&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>searchable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</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>clearable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allowEmpty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>tags</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 options…&quot;</code></td></tr><tr><td><code>emptyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No options found&quot;</code></td></tr><tr><td><code>selectedOptionsLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Selected options&quot;</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear selection&quot;</code></td></tr><tr><td><code>createLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Create&quot;</code></td></tr><tr><td><code>loadMoreLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Load more&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>maxSelections</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>showCounter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>counterTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&#123;selected&#125; selected&quot;</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>selectedTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</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>scrollToSelected</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>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>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><ul><li><code>search</code></li><li><code>select</code></li><li><code>change</code></li><li><code>clear</code></li><li><code>open</code></li><li><code>close</code></li><li><code>load</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedSelect.wrn</code></p><pre data-language="wrn"><code>component AdvancedSelect &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Advanced Select&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    values = []
+    options = []
+    groups = []
+    placeholder = &quot;Select an option&quot;
+    placeholderIcon = &quot;&quot;
+    searchPlaceholder = &quot;Search options…&quot;
+    multiple = false
+    searchable = true
+    defaultOpen = false
+    clearable = true
+    allowEmpty = true
+    tags = false
+    disabled = false
+    required = false
+    invalid = false
+    validationMessage = &quot;&quot;
+    helpText = &quot;&quot;
+    loading = false
+    loadingLabel = &quot;Loading options…&quot;
+    emptyLabel = &quot;No options found&quot;
+    selectedOptionsLabel = &quot;Selected options&quot;
+    clearLabel = &quot;Clear selection&quot;
+    createLabel = &quot;Create&quot;
+    loadMoreLabel = &quot;Load more&quot;
+    searchMode = &quot;contains&quot;
+    searchFields = &quot;label,description&quot;
+    minSearchLength = 0
+    searchResultLimit = 0
+    maxSelections = 0
+    showCounter = false
+    counterTemplate = &quot;&#123;selected&#125; selected&quot;
+    optionTemplate = &quot;default&quot;
+    selectedTemplate = &quot;default&quot;
+    closeOnSelect = true
+    scrollToSelected = true
+    fixed = false
+    placement = &quot;bottom&quot;
+    remote = false
+    remoteUrl = &quot;&quot;
+    remoteQueryParam = &quot;q&quot;
+    remoteDebounce = 250
+    remoteAutoLoad = true
+    infinite = false
+    hasMore = false
+    page = 1
+    class = &quot;&quot;
+    @event search = function
+    @event select = function
+    @event change = function
+    @event clear = function
+    @event open = function
+    @event close = function
+    @event load = function
+    @event error = function
+  &#125;
+
+  state open = defaultOpen
+  state query = &quot;&quot;
+  state activeIndex = -1
+  state selectedValue = value
+  state selectedValues = values
+
+  functions &#123;
+    function allOptions() &#123;
+      return [...groups.flatMap((group) =&gt; group.options || []), ...options]
+    &#125;
+
+    function searchableText(option) &#123;
+      return ((option.label || &quot;&quot;) + &quot; &quot; + (option.description || &quot;&quot;)).toLowerCase()
+    &#125;
+
+    function matches(option) &#123;
+      if (!query || query.length &lt; Number(minSearchLength || 0)) &#123;
+        return true
+      &#125;
+      if (searchMode === &quot;startsWith&quot;) &#123;
+        return searchableText(option).startsWith(query.toLowerCase())
+      &#125;
+      if (searchMode === &quot;exact&quot;) &#123;
+        return searchableText(option) === query.toLowerCase()
+      &#125;
+      return searchableText(option).includes(query.toLowerCase())
+    &#125;
+
+    function matchingOptions(list) &#123;
+      return list.filter((option) =&gt; matches(option))
+    &#125;
+
+    function visibleOptions(list) &#123;
+      if (searchResultLimit &gt; 0) &#123;
+        return matchingOptions(list).slice(0, Number(searchResultLimit))
+      &#125;
+      return matchingOptions(list)
+    &#125;
+
+    function flatVisibleOptions() &#123;
+      return visibleOptions(allOptions())
+    &#125;
+
+    function isSelected(option) &#123;
+      return (
+        multiple
+        ? selectedValues.includes(option.value)
+        : selectedValue === option.value
+      )
+    &#125;
+
+    function selectedOptions() &#123;
+      return allOptions().filter((option) =&gt; isSelected(option))
+    &#125;
+
+    function selectedCount() &#123;
+      return multiple ? selectedValues.length : selectedValue ? 1 : 0
+    &#125;
+
+    function counterText() &#123;
+      return (
+        maxSelections
+        ? selectedCount() + &quot; / &quot; + maxSelections + &quot; selected&quot;
+        : selectedCount() + &quot; selected&quot;
+      )
+    &#125;
+
+    function selectedText() &#123;
+      return (
+        multiple
+        ? selectedValues.join(&quot;, &quot;)
+        : selectedOptions().length
+          ? selectedOptions()[0].label
+          : &quot;&quot;
+      )
+    &#125;
+
+    function triggerText() &#123;
+      return selectedCount() ? selectedText() : placeholder
+    &#125;
+
+    function canSelect(option) &#123;
+      if (option.disabled) &#123;
+        return false
+      &#125;
+      if (!multiple || isSelected(option)) &#123;
+        return true
+      &#125;
+      if (maxSelections &lt;= 0) &#123;
+        return true
+      &#125;
+      return selectedCount() &lt; maxSelections
+    &#125;
+
+    function chooseSingle(option) &#123;
+      if (!canSelect(option)) &#123;
+        return
+      &#125;
+      selectedValue = option.value
+      query = &quot;&quot;
+      if (closeOnSelect) &#123;
+        open = false
+      &#125;
+    &#125;
+
+    function chooseMultiple(option) &#123;
+      if (!canSelect(option)) &#123;
+        return
+      &#125;
+      if (isSelected(option)) &#123;
+        selectedValues = selectedValues.filter((item) =&gt; item !== option.value)
+      &#125; else &#123;
+        selectedValues = selectedValues.concat([option.value])
+      &#125;
+      query = &quot;&quot;
+    &#125;
+
+    function chooseOption(option) &#123;
+      if (multiple) &#123;
+        chooseMultiple(option)
+        return
+      &#125;
+      chooseSingle(option)
+    &#125;
+
+    function clearSelection(event) &#123;
+      event.stopPropagation()
+      selectedValue = &quot;&quot;
+      selectedValues = []
+      query = &quot;&quot;
+      open = false
+    &#125;
+
+    function toggle() &#123;
+      if (disabled) &#123;
+        return;
+      &#125;;
+      open = !open;
+      activeIndex = open &amp;&amp; flatVisibleOptions().length ? 0 : -1;
+    &#125;
+
+    function moveActive(direction) &#123;
+      if (!flatVisibleOptions().length) &#123;
+        return
+      &#125;
+      activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+    &#125;
+
+    function handleKeydown(event) &#123;
+      if (disabled) &#123;
+        return
+      &#125;
+      if (event.key === &quot;ArrowDown&quot;) &#123;
+        event.preventDefault()
+        if (!open) &#123;
+          open = true
+        &#125;
+        moveActive(1)
+      &#125; else if (event.key === &quot;ArrowUp&quot;) &#123;
+        event.preventDefault()
+        if (!open) &#123;
+          open = true
+        &#125;
+        moveActive(-1)
+      &#125; else if (event.key === &quot;Enter&quot; || event.key === &quot; &quot;) &#123;
+        event.preventDefault()
+        if (!open) &#123;
+          open = true
+        &#125; else if (activeIndex &gt;= 0) &#123;
+          chooseOption(flatVisibleOptions()[activeIndex])
+        &#125;
+      &#125; else if (event.key === &quot;Escape&quot;) &#123;
+        open = false
+      &#125; else if (event.key === &quot;Home&quot; &amp;&amp; open) &#123;
+        event.preventDefault()
+        activeIndex = 0
+      &#125; else if (event.key === &quot;End&quot; &amp;&amp; open) &#123;
+        event.preventDefault()
+        activeIndex = flatVisibleOptions().length - 1
+      &#125;
+    &#125;
+
+    function optionIndex(option) &#123;
+      return flatVisibleOptions().findIndex((item) =&gt; item.value === option.value)
+    &#125;
+  &#125;
+
+  view &#123;
+        &lt;div
+      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--advanced-select &#123;open ? 'wire-next--open' : ''&#125; &#123;fixed ? 'wire-next--advanced-select-fixed' : ''&#125; &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
+      data-placement=&quot;&#123;placement&#125;&quot;
+      data-search-mode=&quot;&#123;searchMode&#125;&quot;
+      data-remote=&quot;&#123;remote ? 'true' : 'false'&#125;&quot;
+      data-remote-url=&quot;&#123;remoteUrl&#125;&quot;
+      data-remote-query-param=&quot;&#123;remoteQueryParam&#125;&quot;
+      data-remote-debounce=&quot;&#123;remoteDebounce&#125;&quot;
+      data-remote-auto-load=&quot;&#123;remoteAutoLoad ? 'true' : 'false'&#125;&quot;
+      data-infinite=&quot;&#123;infinite ? 'true' : 'false'&#125;&quot;
+      data-page=&quot;&#123;page&#125;&quot;
+      data-wrn-select
+      @focusout=&quot;if (!event.currentTarget.contains(event.relatedTarget)) &#123; open = false &#125;&quot;
+    &gt;
+        &lt;div class=&quot;wire-next__row&quot;&gt;
+        &lt;label id=&quot;&#123;name&#125;-label&quot; for=&quot;&#123;name&#125;-trigger&quot;&gt;&#123;label&#125;&lt;/label&gt;
+        &lt;small data-show=&quot;showCounter&quot; data-text=&quot;counterText()&quot;&gt;&#123;counterText()&#125;&lt;/small&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;wire-next__select-control&quot;&gt;
+        &lt;button
+          &#123;...attrs&#125;
+          id=&quot;&#123;name&#125;-trigger&quot;
+          type=&quot;button&quot;
+          class=&quot;wire-next__select-trigger&quot;
+          role=&quot;combobox&quot;
+          aria-haspopup=&quot;listbox&quot;
+          aria-expanded=&quot;&#123;open&#125;&quot;
+          aria-controls=&quot;&#123;name&#125;-listbox&quot;
+          aria-labelledby=&quot;&#123;name&#125;-label&quot;
+          aria-invalid=&quot;&#123;invalid&#125;&quot;
+          disabled=&quot;&#123;disabled&#125;&quot;
+          @click=&quot;toggle()&quot;
+          @keydown=&quot;handleKeydown(event)&quot;
+        &gt;
+        &lt;span class=&quot;wire-next__select-value&quot;&gt;
+        &lt;span data-show=&quot;!multiple&quot; data-text=&quot;triggerText()&quot;&gt;&#123;triggerText()&#125;&lt;/span&gt;
+        &lt;span
+              data-show=&quot;multiple &amp;&amp; selectedTemplate === 'count' &amp;&amp; selectedCount() &gt; 0&quot;
+              data-text=&quot;selectedCount() + ' selected'&quot;
+            &gt;&#123;selectedCount()&#125; selected&lt;/span&gt;
+        &lt;span
+              data-show=&quot;multiple &amp;&amp; selectedTemplate === 'text' &amp;&amp; selectedCount() &gt; 0&quot;
+              data-text=&quot;selectedText()&quot;
+            &gt;&#123;selectedText()&#125;&lt;/span&gt;
+        &lt;span
+              class=&quot;wire-next__select-tags&quot;
+              aria-label=&quot;&#123;selectedOptionsLabel&#125;&quot;
+              data-show=&quot;multiple &amp;&amp; selectedTemplate !== 'count' &amp;&amp; selectedTemplate !== 'text' &amp;&amp; selectedCount() &gt; 0&quot;
+            &gt;
+              &#123;#each allOptions() as option&#125;
+                &lt;span data-show=&quot;isSelected(option)&quot;&gt;
+                  &#123;#if optionTemplate === &quot;icon&quot; &amp;&amp; option.icon&#125;&lt;i class=&quot;&#123;option.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                  &#123;#if optionTemplate === &quot;avatar&quot; &amp;&amp; option.avatar&#125;&lt;img src=&quot;&#123;option.avatar&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
+                  &#123;#if optionTemplate === &quot;color&quot; &amp;&amp; option.color&#125;&lt;i class=&quot;wire-next__color-dot&quot; style=&quot;--option-color: &#123;option.color&#125;&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                  &#123;option.label&#125;
+                &lt;/span&gt;
+              &#123;/each&#125;
+            &lt;/span&gt;
+        &lt;span data-show=&quot;multiple &amp;&amp; selectedCount() === 0&quot;&gt;
+              &#123;#if placeholderIcon&#125;&lt;i class=&quot;&#123;placeholderIcon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+              &lt;span class=&quot;wire-next__placeholder&quot;&gt;&#123;placeholder&#125;&lt;/span&gt;
+        &lt;/span&gt;
+        &lt;/span&gt;
+        &lt;span
+            class=&quot;wire-next__select-chevron icon-[lucide--chevrons-up-down]&quot;
+            aria-hidden=&quot;true&quot;
+          &gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button
+          type=&quot;button&quot;
+          class=&quot;wire-next__clear-select&quot;
+          data-show=&quot;clearable &amp;&amp; allowEmpty &amp;&amp; selectedCount() &gt; 0 &amp;&amp; !disabled&quot;
+          aria-label=&quot;&#123;clearLabel&#125;&quot;
+          title=&quot;&#123;clearLabel&#125;&quot;
+          @click=&quot;clearSelection(event)&quot;
+        &gt;
+        &lt;span class=&quot;icon-[lucide--x]&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+        &lt;/div&gt;
+        &lt;div
+        class=&quot;wire-next__select-dropdown &#123;fixed ? 'wire-next__select-dropdown--fixed' : ''&#125;&quot;
+        data-show=&quot;open&quot;
+        style=&quot;&#123;open ? '' : 'display: none'&#125;&quot;
+      &gt;
+          &#123;#if searchable&#125;
+            &lt;label class=&quot;wire-next__select-search&quot;&gt;
+        &lt;span class=&quot;wire-visually-hidden&quot;&gt;&#123;searchPlaceholder&#125;&lt;/span&gt;
+        &lt;span class=&quot;wire-next__search-icon&quot; aria-hidden=&quot;true&quot;&gt;⌕&lt;/span&gt;
+        &lt;input
+                type=&quot;search&quot;
+                value=&quot;&#123;query&#125;&quot;
+                placeholder=&quot;&#123;searchPlaceholder&#125;&quot;
+                autocomplete=&quot;off&quot;
+                @input=&quot;query = event.target.value; activeIndex = flatVisibleOptions().length ? 0 : -1&quot;
+                @keydown=&quot;handleKeydown(event)&quot;
+              /&gt;
+        &lt;/label&gt;
+          &#123;/if&#125;
+
+          &lt;div
+            class=&quot;wire-next__select-message&quot;
+            data-show=&quot;remote &amp;&amp; query.length !== 0 &amp;&amp; query.length &lt; minSearchLength&quot;
+          &gt;Enter at least &#123;minSearchLength&#125; characters.&lt;/div&gt;
+        &lt;div class=&quot;wire-next__select-message&quot; data-show=&quot;loading&quot; role=&quot;status&quot;&gt;
+        &lt;i class=&quot;wire-spinner wire-spinner--inline&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;
+            &#123;loadingLabel&#125;
+          &lt;/div&gt;
+        &lt;div
+              id=&quot;&#123;name&#125;-listbox&quot;
+              class=&quot;wire-next__select-list&quot;
+              data-show=&quot;(!remote || (query.length === 0 &amp;&amp; remoteAutoLoad) || query.length &gt;= minSearchLength) &amp;&amp; !loading&quot;
+              role=&quot;listbox&quot;
+              aria-multiselectable=&quot;&#123;multiple&#125;&quot;
+            &gt;
+              &#123;#each groups as group&#125;
+                &#123;#if visibleOptions(group.options || []).length&#125;
+                  &lt;div class=&quot;wire-next__option-group&quot; role=&quot;group&quot; aria-label=&quot;&#123;group.label&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next__group-label&quot;&gt;&#123;group.label&#125;&lt;/div&gt;
+                    &#123;#each group.options || [] as option&#125;
+                      &lt;button
+                        type=&quot;button&quot;
+                        class=&quot;wire-next__select-option &#123;isSelected(option) ? 'wire-next__select-option--selected' : ''&#125; &#123;optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''&#125;&quot;
+                        data-option-value=&quot;&#123;option.value&#125;&quot;
+                        data-show=&quot;matches(option)&quot;
+                        role=&quot;option&quot;
+                        aria-selected=&quot;&#123;isSelected(option)&#125;&quot;
+                        disabled=&quot;&#123;!canSelect(option)&#125;&quot;
+                        @mouseenter=&quot;activeIndex = optionIndex(option)&quot;
+                        @click=&quot;chooseOption(option)&quot;
+                      &gt;
+                        &#123;#if optionTemplate === &quot;icon&quot; &amp;&amp; option.icon&#125;&lt;i class=&quot;&#123;option.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                        &#123;#if optionTemplate === &quot;avatar&quot; &amp;&amp; option.avatar&#125;&lt;img src=&quot;&#123;option.avatar&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
+                        &#123;#if optionTemplate === &quot;color&quot; &amp;&amp; option.color&#125;&lt;i class=&quot;wire-next__color-dot&quot; style=&quot;--option-color: &#123;option.color&#125;&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                        &lt;span&gt;
+        &lt;strong&gt;&#123;option.label&#125;&lt;/strong&gt;&#123;#if option.description&#125;&lt;small&gt;&#123;option.description&#125;&lt;/small&gt;&#123;/if&#125;&lt;/span&gt;
+        &lt;i
+                          class=&quot;wire-next__check icon-[lucide--check]&quot;
+                          data-show=&quot;isSelected(option)&quot;
+                          aria-hidden=&quot;true&quot;
+                        &gt;
+        &lt;/i&gt;
+        &lt;/button&gt;
+                    &#123;/each&#125;
+                  &lt;/div&gt;
+                &#123;/if&#125;
+              &#123;/each&#125;
+
+              &#123;#each options as option&#125;
+                &lt;button
+                  type=&quot;button&quot;
+                  class=&quot;wire-next__select-option &#123;isSelected(option) ? 'wire-next__select-option--selected' : ''&#125; &#123;optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''&#125;&quot;
+                  data-option-value=&quot;&#123;option.value&#125;&quot;
+                  data-show=&quot;matches(option)&quot;
+                  role=&quot;option&quot;
+                  aria-selected=&quot;&#123;isSelected(option)&#125;&quot;
+                  disabled=&quot;&#123;!canSelect(option)&#125;&quot;
+                  @mouseenter=&quot;activeIndex = optionIndex(option)&quot;
+                  @click=&quot;chooseOption(option)&quot;
+                &gt;
+                  &#123;#if optionTemplate === &quot;icon&quot; &amp;&amp; option.icon&#125;&lt;i class=&quot;&#123;option.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                  &#123;#if optionTemplate === &quot;avatar&quot; &amp;&amp; option.avatar&#125;&lt;img src=&quot;&#123;option.avatar&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
+                  &#123;#if optionTemplate === &quot;color&quot; &amp;&amp; option.color&#125;&lt;i class=&quot;wire-next__color-dot&quot; style=&quot;--option-color: &#123;option.color&#125;&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                  &lt;span&gt;
+        &lt;strong&gt;&#123;option.label&#125;&lt;/strong&gt;&#123;#if option.description&#125;&lt;small&gt;&#123;option.description&#125;&lt;/small&gt;&#123;/if&#125;&lt;/span&gt;
+        &lt;i
+                    class=&quot;wire-next__check icon-[lucide--check]&quot;
+                    data-show=&quot;isSelected(option)&quot;
+                    aria-hidden=&quot;true&quot;
+                  &gt;
+        &lt;/i&gt;
+        &lt;/button&gt;
+              &#123;/each&#125;
+
+              &#123;#if !loading &amp;&amp; !flatVisibleOptions().length&#125;
+                &lt;div class=&quot;wire-next__select-message&quot;&gt;&#123;emptyLabel&#125;&lt;/div&gt;
+              &#123;/if&#125;
+            &lt;/div&gt;
+
+          &#123;#if tags &amp;&amp; query &amp;&amp; !allOptions().some((option) =&gt; option.label.toLowerCase() === query.toLowerCase())&#125;
+            &lt;button type=&quot;button&quot; class=&quot;wire-next__create-option&quot;&gt;&#123;createLabel&#125; “&#123;query&#125;”&lt;/button&gt;
+          &#123;/if&#125;
+          &lt;button
+            type=&quot;button&quot;
+            class=&quot;wire-next__load-more&quot;
+            data-wrn-select-load-more
+            data-show=&quot;infinite &amp;&amp; hasMore&quot;
+          &gt;&#123;loadMoreLabel&#125;&lt;/button&gt;
+        &lt;/div&gt;
+        &lt;input
+        type=&quot;hidden&quot;
+        name=&quot;&#123;name&#125;&quot;
+        value=&quot;&#123;multiple ? selectedValues.join(',') : selectedValue&#125;&quot;
+        required=&quot;&#123;required&#125;&quot;
+        aria-describedby=&quot;&#123;validationMessage ? `$&#123;name&#125;-validation` : helpText ? `$&#123;name&#125;-help` : ''&#125;&quot;
+      /&gt;
+
+      &#123;#if helpText &amp;&amp; !validationMessage&#125;&lt;small id=&quot;&#123;name&#125;-help&quot;&gt;&#123;helpText&#125;&lt;/small&gt;&#123;/if&#125;
+      &lt;small
+        id=&quot;&#123;name&#125;-validation&quot;
+        class=&quot;wire-next__validation&quot;
+        data-error=&quot;&#123;name&#125;&quot;
+      &gt;&#123;validationMessage&#125;&lt;/small&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/alert.wrn b/app/pages/components/alert.wrn
index c03a409c..b97a11b0 100644
--- a/app/pages/components/alert.wrn
+++ b/app/pages/components/alert.wrn
@@ -1,7 +1,7 @@
-page alertcomponent {
+page Alertcomponent {
   seo {
-    title = "alert component"
-    description = "Reusable alert component."
+    title = "Alert component"
+    description = "Theme-aware, responsive alert component."
   }
 
   view {
@@ -10,44 +10,36 @@ 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.4</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.3.5</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">core component</span><h1>alert</h1><p>Reusable alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>5 props</span><span>1 slots</span><span>1 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
-  title=&quot;Notice&quot;
+      <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.5</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;
-  variant=&quot;info&quot;
-  dismissible=&quot;false&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>class</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;Notice&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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;info&quot;</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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><ul><li><code>click</code></li></ul></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;
+  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;
   props &#123;
-    class = &quot;&quot;
-    title = &quot;Notice&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Alert&quot;
     description = &quot;&quot;
-    variant = &quot;info&quot;
-    dismissible = false
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
   &#125;
-
-  state visible = true
-
   view &#123;
-        &lt;aside data-show=&quot;visible&quot; role=&quot;alert&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-alert--rich &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-alert__icon&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;svg viewBox=&quot;0 0 24 24&quot;&gt;
-        &lt;path d=&quot;M12 3 4.5 6v5.4c0 4.6 3.2 8.8 7.5 9.6 4.3-.8 7.5-5 7.5-9.6V6L12 3Z&quot; /&gt;
-        &lt;path d=&quot;m9 12 2 2 4-4&quot; /&gt;
-        &lt;/svg&gt;
-        &lt;/span&gt;
-        &lt;div class=&quot;wire-alert__content&quot;&gt;
-          &#123;#if title&#125;&lt;h3 class=&quot;wire-alert__title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;
-          &#123;#if description&#125;&lt;p class=&quot;wire-alert__body&quot;&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-          &lt;slot /&gt;
-        &lt;/div&gt;
-        &#123;#if dismissible&#125;&lt;button type=&quot;button&quot; aria-label=&quot;Dismiss&quot; @click=&quot;visible = false&quot; class=&quot;wire-alert__dismiss&quot;&gt;×&lt;/button&gt;&#123;/if&#125;
-      &lt;/aside&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--alert wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/avatar-group.wrn b/app/pages/components/avatar-group.wrn
index 17d0a8cb..d2d05e2f 100644
--- a/app/pages/components/avatar-group.wrn
+++ b/app/pages/components/avatar-group.wrn
@@ -1,7 +1,7 @@
 page AvatarGroupcomponent {
   seo {
     title = "AvatarGroup component"
-    description = "Reusable avatar group component."
+    description = "Theme-aware, responsive avatar group component."
   }
 
   view {
@@ -10,42 +10,36 @@ 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.4</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.3.5</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">forms component</span><h1>AvatarGroup</h1><p>Reusable avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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
-  label=&quot;Avatar&quot;
-  name=&quot;name&quot;
-  value=&quot;value&quot;
-  placeholder=&quot;placeholder&quot;
-  type=&quot;text&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AvatarGroup&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;Avatar&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>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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/AvatarGroup.wrn</code></p><pre data-language="wrn"><code>component AvatarGroup &#123;
+      <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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AvatarGroup&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 Group&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/AvatarGroup.wrn</code></p><pre data-language="wrn"><code>component AvatarGroup &#123;
   props &#123;
-    label = &quot;Avatar&quot; 
-    name = &quot;&quot;
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;text&quot;
-    required = false
-    disabled = false
-    readonly = false
-    help = &quot;&quot;
-    error = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Avatar Group&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;
-        &lt;/span&gt;
-        &lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;
-        &lt;slot /&gt;
-        &lt;/label&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--avatar-group wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/avatar.wrn b/app/pages/components/avatar.wrn
index 4014ca86..5bc5455d 100644
--- a/app/pages/components/avatar.wrn
+++ b/app/pages/components/avatar.wrn
@@ -1,7 +1,7 @@
 page Avatarcomponent {
   seo {
     title = "Avatar component"
-    description = "Reusable avatar component."
+    description = "Theme-aware, responsive avatar component."
   }
 
   view {
@@ -10,31 +10,36 @@ 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.4</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.3.5</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">content component</span><h1>Avatar</h1><p>Reusable avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Avatar
-  src=&quot;src&quot;
-  alt=&quot;alt&quot;
-  initials=&quot;WR&quot;
-  size=&quot;md&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>initials</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;WR&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></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/Avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar &#123;
+      <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.5</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;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Avatar&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
-    src = &quot;&quot;
-    alt = &quot;&quot;
-    initials = &quot;WR&quot;
-    size = &quot;md&quot;
   &#125;
   view &#123;
-        &lt;span class=&quot;inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white &#123;size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'&#125; &#123;class&#125;&quot;&gt;
-        &lt;img data-show=&quot;src&quot; src=&quot;&#123;src&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;h-full w-full object-cover&quot; /&gt;
-        &lt;span data-show=&quot;!src&quot; aria-hidden=&quot;true&quot;&gt;&#123;initials&#125;&lt;/span&gt;
-        &lt;/span&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--avatar wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/badge.wrn b/app/pages/components/badge.wrn
index a391ff85..60fae5ab 100644
--- a/app/pages/components/badge.wrn
+++ b/app/pages/components/badge.wrn
@@ -1,7 +1,7 @@
 page Badgecomponent {
   seo {
     title = "Badge component"
-    description = "Reusable badge component."
+    description = "Theme-aware, responsive badge component."
   }
 
   view {
@@ -10,46 +10,36 @@ 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.4</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.3.5</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">feedback component</span><h1>Badge</h1><p>Reusable badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Badge
-  label=&quot;label&quot;
-  variant=&quot;neutral&quot;
-  size=&quot;md&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;neutral&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></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;
+      <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.5</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;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Badge&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
-    label = &quot;&quot;
-    variant = &quot;neutral&quot;
-    size = &quot;md&quot;
   &#125;
-
   view &#123;
-        &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-badge--&#123;size&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if variant === &quot;success&quot;&#125;
-        &lt;span class=&quot;size-1.5 rounded-full bg-[var(--wire-color-success)]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-      &#123;/if&#125;
-      &#123;#if variant === &quot;warning&quot;&#125;
-        &lt;span class=&quot;size-1.5 rounded-full bg-[var(--wire-color-warning)]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-      &#123;/if&#125;
-      &#123;#if variant === &quot;danger&quot;&#125;
-        &lt;span class=&quot;size-1.5 rounded-full bg-[var(--wire-color-danger)]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-      &#123;/if&#125;
-      &#123;#if variant === &quot;brand&quot;&#125;
-        &lt;span class=&quot;size-1.5 rounded-full bg-[var(--wire-color-primary)]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-      &#123;/if&#125;
-      &lt;span&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;slot /&gt;
-        &lt;/span&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--badge wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/blockquote.wrn b/app/pages/components/blockquote.wrn
new file mode 100644
index 00000000..c3708996
--- /dev/null
+++ b/app/pages/components/blockquote.wrn
@@ -0,0 +1,46 @@
+page Blockquotecomponent {
+  seo {
+    title = "Blockquote component"
+    description = "Theme-aware, responsive blockquote component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Blockquote&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;Blockquote&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/Blockquote.wrn</code></p><pre data-language="wrn"><code>component Blockquote &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Blockquote&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--blockquote wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/breadcrumb.wrn b/app/pages/components/breadcrumb.wrn
new file mode 100644
index 00000000..04be1b8b
--- /dev/null
+++ b/app/pages/components/breadcrumb.wrn
@@ -0,0 +1,44 @@
+page Breadcrumbcomponent {
+  seo {
+    title = "Breadcrumb component"
+    description = "Theme-aware, responsive breadcrumb component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Breadcrumb&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;Breadcrumb&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>active</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><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/Breadcrumb.wrn</code></p><pre data-language="wrn"><code>component Breadcrumb &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Breadcrumb&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--breadcrumb wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.5</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>
+  }
+}
diff --git a/app/pages/components/button-group.wrn b/app/pages/components/button-group.wrn
index 1a2f0b02..e8010bdc 100644
--- a/app/pages/components/button-group.wrn
+++ b/app/pages/components/button-group.wrn
@@ -1,7 +1,7 @@
 page ButtonGroupcomponent {
   seo {
     title = "ButtonGroup component"
-    description = "Reusable button group component."
+    description = "Theme-aware, responsive button group component."
   }
 
   view {
@@ -10,42 +10,36 @@ 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.4</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.3.5</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">forms component</span><h1>ButtonGroup</h1><p>Reusable button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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
-  label=&quot;Button&quot;
-  name=&quot;name&quot;
-  value=&quot;value&quot;
-  placeholder=&quot;placeholder&quot;
-  type=&quot;text&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ButtonGroup&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>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>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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/ButtonGroup.wrn</code></p><pre data-language="wrn"><code>component ButtonGroup &#123;
+      <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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ButtonGroup&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;Button Group&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/ButtonGroup.wrn</code></p><pre data-language="wrn"><code>component ButtonGroup &#123;
   props &#123;
-    label = &quot;Button&quot; 
-    name = &quot;&quot;
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;text&quot;
-    required = false
-    disabled = false
-    readonly = false
-    help = &quot;&quot;
-    error = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Button Group&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;
-        &lt;/span&gt;
-        &lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;
-        &lt;slot /&gt;
-        &lt;/label&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--button-group wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/button.wrn b/app/pages/components/button.wrn
index 6acbe66b..54e303ce 100644
--- a/app/pages/components/button.wrn
+++ b/app/pages/components/button.wrn
@@ -1,7 +1,7 @@
 page Buttoncomponent {
   seo {
     title = "Button component"
-    description = "Reusable button component."
+    description = "Theme-aware, responsive button component."
   }
 
   view {
@@ -10,60 +10,178 @@ 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.4</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.3.5</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">actions component</span><h1>Button</h1><p>Reusable button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>10 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.3.5</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;
-  type=&quot;button&quot;
-  variant=&quot;primary&quot;
-  size=&quot;md&quot;
-  disabled=&quot;false&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>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;primary&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>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>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>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>className</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;
+  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;
   props &#123;
     label = &quot;Button&quot;
+    loadingLabel = &quot;Loading…&quot;
+    description = &quot;&quot;
+    as = &quot;&quot;
+    href = &quot;&quot;
+    target = &quot;&quot;
+    rel = &quot;&quot;
     type = &quot;button&quot;
-    variant = &quot;primary&quot;
-    size = &quot;md&quot;
+    variant = &quot;default&quot;
+    color = &quot;primary&quot;
+    size = &quot;default&quot;
     disabled = false
     loading = false
+    pill = false
+    fullWidth = false
     icon = &quot;&quot;
     iconPosition = &quot;start&quot;
-    fullWidth = false
-    className = &quot;&quot;
+    ariaLabel = &quot;&quot;
+    ariaPressed = &quot;&quot;
+    ariaExpanded = &quot;&quot;
+    ariaControls = &quot;&quot;
+    title = &quot;&quot;
+    autofocus = false
+    controlClass = &quot;&quot;
+    class = &quot;&quot;
   &#125;
 
   view &#123;
-        &lt;button
-      type=&quot;&#123;type&#125;&quot;
-      disabled=&quot;&#123;disabled || loading&#125;&quot;
-      aria-busy=&quot;&#123;loading&#125;&quot;
-      class=&quot;wire-btn wire-btn--&#123;variant&#125; wire-btn--&#123;size&#125; &#123;className&#125;&quot;
-      class:w-full='&#123;fullWidth&#125;'
+        &lt;span
+      class=&quot;wire-action &#123;fullWidth ? 'w-full' : ''&#125; &#123;class&#125;&quot;
     &gt;
-      &#123;#if loading&#125;
-        &lt;span class=&quot;wire-spinner&quot; aria-hidden=&quot;true&quot;&gt;
+      &#123;#if as === &quot;a&quot; || (as === &quot;&quot; &amp;&amp; href)&#125;
+        &lt;a
+          &#123;...attrs&#125;
+          href=&quot;&#123;disabled || loading ? '' : href&#125;&quot;
+          target=&quot;&#123;target&#125;&quot;
+          rel=&quot;&#123;rel&#125;&quot;
+          title=&quot;&#123;title&#125;&quot;
+          aria-label=&quot;&#123;ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')&#125;&quot;
+          aria-disabled=&quot;&#123;disabled || loading&#125;&quot;
+          aria-busy=&quot;&#123;loading&#125;&quot;
+          aria-pressed=&quot;&#123;ariaPressed&#125;&quot;
+          aria-expanded=&quot;&#123;ariaExpanded&#125;&quot;
+          aria-controls=&quot;&#123;ariaControls&#125;&quot;
+          tabindex=&quot;&#123;disabled || loading ? '-1' : '0'&#125;&quot;
+          class=&quot;wire-btn wire-btn--variant-&#123;variant&#125; wire-btn--color-&#123;color&#125; wire-btn--size-&#123;size&#125; &#123;pill ? 'wire-btn--pill' : ''&#125; &#123;description ? 'wire-btn--with-description' : ''&#125; &#123;fullWidth ? 'w-full' : ''&#125; &#123;controlClass&#125;&quot;
+        &gt;
+          &#123;#if loading&#125;
+            &lt;span
+              class=&quot;wire-spinner wire-spinner--inline&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
         &lt;/span&gt;
-      &#123;/if&#125;
-
-      &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;start&quot;&#125;
-        &lt;span class=&quot;&#123;icon&#125; size-4 shrink-0&quot; aria-hidden=&quot;true&quot;&gt;
+          &#123;/if&#125;
+          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;start&quot;&#125;
+            &lt;span
+              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
         &lt;/span&gt;
-      &#123;/if&#125;
-
-      &lt;span&gt;&#123;label&#125;&lt;/span&gt;
-
-      &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;end&quot;&#125;
-        &lt;span class=&quot;&#123;icon&#125; size-4 shrink-0&quot; aria-hidden=&quot;true&quot;&gt;
+          &#123;/if&#125;
+          &lt;span
+            class=&quot;wire-btn__copy &#123;(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''&#125;&quot;
+          &gt;
+        &lt;span
+              class=&quot;wire-btn__label&quot;
+            &gt;
+        &lt;slot&gt;&#123;loading ? loadingLabel : label&#125;&lt;/slot&gt;
         &lt;/span&gt;
-      &#123;/if&#125;
-
-      &lt;slot /&gt;
+            &#123;#if description &amp;&amp; !loading&#125;
+              &lt;span
+                class=&quot;wire-btn__description&quot;
+              &gt;
+                &#123;description&#125;
+              &lt;/span&gt;
+            &#123;/if&#125;
+          &lt;/span&gt;
+          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;end&quot;&#125;
+            &lt;span
+              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
+        &lt;/span&gt;
+          &#123;/if&#125;
+          &#123;#if (size === &quot;icon&quot; || size === &quot;icon-xs&quot; || size === &quot;icon-sm&quot; || size === &quot;icon-lg&quot;) &amp;&amp; (ariaLabel || label)&#125;
+            &lt;span
+              class=&quot;wire-btn__tooltip&quot;
+              role=&quot;tooltip&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
+              &#123;ariaLabel || label&#125;
+            &lt;/span&gt;
+          &#123;/if&#125;
+        &lt;/a&gt;
+      &#123;:else&#125;
+        &lt;button
+          &#123;...attrs&#125;
+          type=&quot;&#123;type&#125;&quot;
+          title=&quot;&#123;title&#125;&quot;
+          autofocus=&quot;&#123;autofocus&#125;&quot;
+          disabled=&quot;&#123;disabled || loading&#125;&quot;
+          aria-label=&quot;&#123;ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')&#125;&quot;
+          aria-busy=&quot;&#123;loading&#125;&quot;
+          aria-pressed=&quot;&#123;ariaPressed&#125;&quot;
+          aria-expanded=&quot;&#123;ariaExpanded&#125;&quot;
+          aria-controls=&quot;&#123;ariaControls&#125;&quot;
+          class=&quot;wire-btn wire-btn--variant-&#123;variant&#125; wire-btn--color-&#123;color&#125; wire-btn--size-&#123;size&#125; &#123;pill ? 'wire-btn--pill' : ''&#125; &#123;description ? 'wire-btn--with-description' : ''&#125; &#123;fullWidth ? 'w-full' : ''&#125; &#123;controlClass&#125;&quot;
+        &gt;
+          &#123;#if loading&#125;
+            &lt;span
+              class=&quot;wire-spinner wire-spinner--inline&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
+        &lt;/span&gt;
+          &#123;/if&#125;
+          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;start&quot;&#125;
+            &lt;span
+              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
+        &lt;/span&gt;
+          &#123;/if&#125;
+          &lt;span
+            class=&quot;wire-btn__copy &#123;(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''&#125;&quot;
+          &gt;
+        &lt;span
+              class=&quot;wire-btn__label&quot;
+            &gt;
+        &lt;slot&gt;&#123;loading ? loadingLabel : label&#125;&lt;/slot&gt;
+        &lt;/span&gt;
+            &#123;#if description &amp;&amp; !loading&#125;
+              &lt;span
+                class=&quot;wire-btn__description&quot;
+              &gt;
+                &#123;description&#125;
+              &lt;/span&gt;
+            &#123;/if&#125;
+          &lt;/span&gt;
+          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;end&quot;&#125;
+            &lt;span
+              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
+        &lt;/span&gt;
+          &#123;/if&#125;
+          &#123;#if (size === &quot;icon&quot; || size === &quot;icon-xs&quot; || size === &quot;icon-sm&quot; || size === &quot;icon-lg&quot;) &amp;&amp; (ariaLabel || label)&#125;
+            &lt;span
+              class=&quot;wire-btn__tooltip&quot;
+              role=&quot;tooltip&quot;
+              aria-hidden=&quot;true&quot;
+            &gt;
+              &#123;ariaLabel || label&#125;
+            &lt;/span&gt;
+          &#123;/if&#125;
         &lt;/button&gt;
+      &#123;/if&#125;
+    &lt;/span&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/card.wrn b/app/pages/components/card.wrn
index 858955ce..92f8e984 100644
--- a/app/pages/components/card.wrn
+++ b/app/pages/components/card.wrn
@@ -1,7 +1,7 @@
-page cardcomponent {
+page Cardcomponent {
   seo {
-    title = "card component"
-    description = "Reusable card component."
+    title = "Card component"
+    description = "Theme-aware, responsive card component."
   }
 
   view {
@@ -10,28 +10,36 @@ 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.4</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.3.5</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">core component</span><h1>card</h1><p>Reusable card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;card
-  variant=&quot;default&quot;
-  padding=&quot;md&quot;
-  interactive=&quot;false&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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>padding</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>interactive</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>className</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;
+      <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.5</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;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Card&quot;
+    description = &quot;&quot;
+    items = []
     variant = &quot;default&quot;
-    padding = &quot;md&quot;
-    interactive = false
-    className = &quot;&quot;
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;article class=&quot;wire-card wire-card--&#123;variant&#125; wire-card--padding-&#123;padding&#125; &#123;interactive ? 'wire-card--interactive' : ''&#125; &#123;className&#125;&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/article&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--card wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/carousel.wrn b/app/pages/components/carousel.wrn
index 404dd8fa..28d9fd6f 100644
--- a/app/pages/components/carousel.wrn
+++ b/app/pages/components/carousel.wrn
@@ -1,7 +1,7 @@
 page Carouselcomponent {
   seo {
     title = "Carousel component"
-    description = "Reusable carousel component."
+    description = "Theme-aware, responsive carousel component."
   }
 
   view {
@@ -10,32 +10,36 @@ 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.4</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.3.5</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">content component</span><h1>Carousel</h1><p>Reusable carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Carousel
-  eyebrow=&quot;eyebrow&quot;
-  title=&quot;title&quot;
+      <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.5</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;
   description=&quot;description&quot;
-  href=&quot;href&quot;
-  actionLabel=&quot;Learn more&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Carousel&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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</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/Carousel.wrn</code></p><pre data-language="wrn"><code>component Carousel &#123;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Carousel&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;Carousel&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/Carousel.wrn</code></p><pre data-language="wrn"><code>component Carousel &#123;
   props &#123;
-    eyebrow = &quot;&quot;
-    title = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Carousel&quot;
     description = &quot;&quot;
-    href = &quot;&quot;
-    actionLabel = &quot;Learn more&quot;
-    image = &quot;&quot;
-    alt = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&#123;#if image&#125;&lt;img src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&#123;/if&#125;&#123;#if eyebrow&#125;&lt;span class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&#123;/if&#125;&#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;&#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;&lt;slot /&gt;&#123;#if href&#125;&lt;a href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&#123;/if&#125;&lt;/article&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--carousel wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/chart.wrn b/app/pages/components/chart.wrn
new file mode 100644
index 00000000..4800eee7
--- /dev/null
+++ b/app/pages/components/chart.wrn
@@ -0,0 +1,46 @@
+page Chartcomponent {
+  seo {
+    title = "Chart component"
+    description = "Theme-aware, responsive chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Chart&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;Chart&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/Chart.wrn</code></p><pre data-language="wrn"><code>component Chart &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Chart&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--chart wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/chat-bubble.wrn b/app/pages/components/chat-bubble.wrn
new file mode 100644
index 00000000..7c8c87f1
--- /dev/null
+++ b/app/pages/components/chat-bubble.wrn
@@ -0,0 +1,46 @@
+page ChatBubblecomponent {
+  seo {
+    title = "ChatBubble component"
+    description = "Theme-aware, responsive chat bubble component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChatBubble&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;Chat Bubble&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/ChatBubble.wrn</code></p><pre data-language="wrn"><code>component ChatBubble &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Chat Bubble&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--chat-bubble wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/checkbox.wrn b/app/pages/components/checkbox.wrn
index 5360b82e..88969bce 100644
--- a/app/pages/components/checkbox.wrn
+++ b/app/pages/components/checkbox.wrn
@@ -1,7 +1,7 @@
 page Checkboxcomponent {
   seo {
     title = "Checkbox component"
-    description = "Reusable checkbox component."
+    description = "Theme-aware, responsive checkbox component."
   }
 
   view {
@@ -10,37 +10,35 @@ 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.4</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.3.5</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">core component</span><h1>Checkbox</h1><p>Reusable checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Checkbox
-  id=&quot;id&quot;
-  name=&quot;name&quot;
+      <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.5</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;
-  description=&quot;description&quot;
-  checked=&quot;false&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>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;&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>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&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></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;
+  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;
   props &#123;
-    class = &quot;&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
     label = &quot;Checkbox&quot;
-    description = &quot;&quot;
+    name = &quot;&quot;
+    value = &quot;on&quot;
     checked = false
     disabled = false
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900 &#123;class&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;checkbox&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950&quot; /&gt;
-        &lt;span&gt;
-        &lt;span class=&quot;block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;description&quot; class=&quot;mt-0.5 block text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;description&#125;&lt;/span&gt;
-        &lt;/span&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--choice wire-next--checkbox &#123;class&#125;&quot;&gt;
+        &lt;input &#123;...attrs&#125; type=&quot;checkbox&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; /&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
         &lt;/label&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/clipboard.wrn b/app/pages/components/clipboard.wrn
new file mode 100644
index 00000000..6f6bc5d8
--- /dev/null
+++ b/app/pages/components/clipboard.wrn
@@ -0,0 +1,46 @@
+page Clipboardcomponent {
+  seo {
+    title = "Clipboard component"
+    description = "Theme-aware, responsive clipboard component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Clipboard&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;Clipboard&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/Clipboard.wrn</code></p><pre data-language="wrn"><code>component Clipboard &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Clipboard&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--clipboard wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/collapse.wrn b/app/pages/components/collapse.wrn
new file mode 100644
index 00000000..c40e6b87
--- /dev/null
+++ b/app/pages/components/collapse.wrn
@@ -0,0 +1,44 @@
+page Collapsecomponent {
+  seo {
+    title = "Collapse component"
+    description = "Theme-aware, responsive collapse component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  multiple=&quot;false&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Collapse&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>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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>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/Collapse.wrn</code></p><pre data-language="wrn"><code>component Collapse &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    items = []
+    multiple = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--collapse &#123;class&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;details open=&quot;&#123;item.open&#125;&quot;&gt;
+        &lt;summary&gt;&#123;item.label&#125;&lt;/summary&gt;
+        &lt;div&gt;&#123;item.content&#125;&lt;/div&gt;
+        &lt;/details&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/color-picker.wrn b/app/pages/components/color-picker.wrn
index 9c11539c..5244d406 100644
--- a/app/pages/components/color-picker.wrn
+++ b/app/pages/components/color-picker.wrn
@@ -1,7 +1,7 @@
 page ColorPickercomponent {
   seo {
     title = "ColorPicker component"
-    description = "Reusable color picker component."
+    description = "Theme-aware, responsive color picker component."
   }
 
   view {
@@ -10,42 +10,40 @@ 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.4</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.3.5</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>Reusable color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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;ColorPicker
-  label=&quot;Color&quot;
+      <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.5</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;
   name=&quot;name&quot;
   value=&quot;value&quot;
-  placeholder=&quot;placeholder&quot;
-  type=&quot;text&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorPicker&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;Color&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>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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/ColorPicker.wrn</code></p><pre data-language="wrn"><code>component ColorPicker &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorPicker&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;Color Picker&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;color&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/ColorPicker.wrn</code></p><pre data-language="wrn"><code>component ColorPicker &#123;
   props &#123;
-    label = &quot;Color&quot; 
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Color Picker&quot;
     name = &quot;&quot;
     value = &quot;&quot;
     placeholder = &quot;&quot;
-    type = &quot;text&quot;
-    required = false
+    type = &quot;color&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = &quot;&quot;
     disabled = false
-    readonly = false
-    help = &quot;&quot;
-    error = &quot;&quot;
+    required = false
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;
-        &lt;/span&gt;
-        &lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;
-        &lt;slot /&gt;
+        &lt;label class=&quot;wire-next wire-next--field wire-next--color-picker &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/columns.wrn b/app/pages/components/columns.wrn
new file mode 100644
index 00000000..830a9c8c
--- /dev/null
+++ b/app/pages/components/columns.wrn
@@ -0,0 +1,42 @@
+page Columnscomponent {
+  seo {
+    title = "Columns component"
+    description = "Theme-aware, responsive columns component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  gap=&quot;md&quot;
+  maxWidth=&quot;xl&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Columns&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/Columns.wrn</code></p><pre data-language="wrn"><code>component Columns &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    columns = 2
+    gap = &quot;md&quot;
+    maxWidth = &quot;xl&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--columns wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#125;&quot;&gt;
+        &lt;slot /&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/combo-box.wrn b/app/pages/components/combo-box.wrn
new file mode 100644
index 00000000..5887496e
--- /dev/null
+++ b/app/pages/components/combo-box.wrn
@@ -0,0 +1,420 @@
+page ComboBoxcomponent {
+  seo {
+    title = "ComboBox component"
+    description = "Editable autocomplete combobox with local and remote suggestions."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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>loadMoreLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Load more&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><ul><li><code>search</code></li><li><code>select</code></li><li><code>change</code></li><li><code>clear</code></li><li><code>open</code></li><li><code>close</code></li><li><code>load</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComboBox.wrn</code></p><pre data-language="wrn"><code>component ComboBox &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;ComboBox&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    options = []
+    groups = []
+    placeholder = &quot;Search or select an option&quot;
+    searchPlaceholder = &quot;Start typing…&quot;
+    clearable = true
+    allowCustomValue = false
+    disabled = false
+    required = false
+    invalid = false
+    validationMessage = &quot;&quot;
+    helpText = &quot;&quot;
+    loading = false
+    loadingLabel = &quot;Loading suggestions…&quot;
+    emptyLabel = &quot;No matching options&quot;
+    clearLabel = &quot;Clear value&quot;
+    toggleLabel = &quot;Toggle suggestions&quot;
+    searchMode = &quot;contains&quot;
+    searchFields = &quot;label,description&quot;
+    minSearchLength = 0
+    searchResultLimit = 0
+    optionTemplate = &quot;default&quot;
+    defaultOpen = false
+    closeOnSelect = true
+    fixed = false
+    placement = &quot;bottom&quot;
+    autocomplete = &quot;off&quot;
+    remote = false
+    remoteUrl = &quot;&quot;
+    remoteQueryParam = &quot;q&quot;
+    remoteDebounce = 250
+    remoteAutoLoad = true
+    infinite = false
+    hasMore = false
+    page = 1
+    loadMoreLabel = &quot;Load more&quot;
+    class = &quot;&quot;
+    @event search = function
+    @event select = function
+    @event change = function
+    @event clear = function
+    @event open = function
+    @event close = function
+    @event load = function
+    @event error = function
+  &#125;
+
+  state open = defaultOpen
+  state query = &quot;&quot;
+  state selectedValue = value
+  state activeIndex = -1
+
+  functions &#123;
+    function allOptions() &#123;
+      return [...groups.flatMap((group) =&gt; group.options || []), ...options]
+    &#125;
+
+    function searchableText(option) &#123;
+      return ((option.label || &quot;&quot;) + &quot; &quot; + (option.description || &quot;&quot;)).toLowerCase()
+    &#125;
+
+    function matches(option) &#123;
+      if (!query || query.length &lt; minSearchLength) &#123;
+        return true
+      &#125;
+      if (searchMode === &quot;startsWith&quot;) &#123;
+        return searchableText(option).startsWith(query.toLowerCase())
+      &#125;
+      if (searchMode === &quot;exact&quot;) &#123;
+        return searchableText(option) === query.toLowerCase()
+      &#125;
+      return searchableText(option).includes(query.toLowerCase())
+    &#125;
+
+    function matchingOptions(list) &#123;
+      return list.filter((option) =&gt; matches(option))
+    &#125;
+
+    function visibleOptions(list) &#123;
+      if (searchResultLimit &gt; 0) &#123;
+        return matchingOptions(list).slice(0, searchResultLimit)
+      &#125;
+      return matchingOptions(list)
+    &#125;
+
+    function flatVisibleOptions() &#123;
+      return visibleOptions(allOptions())
+    &#125;
+
+    function isSelected(option) &#123;
+      return selectedValue === option.value
+    &#125;
+
+    function selectedOptions() &#123;
+      return allOptions().filter((option) =&gt; isSelected(option))
+    &#125;
+
+    function selectedText() &#123;
+      return selectedOptions().length ? selectedOptions()[0].label : selectedValue
+    &#125;
+
+    function inputText() &#123;
+      return query || selectedText()
+    &#125;
+
+    function shouldShowDropdown() &#123;
+      if (!open) &#123;
+        return false
+      &#125;
+      if (loading) &#123;
+        return true
+      &#125;
+      if (remote &amp;&amp; query.length !== 0 &amp;&amp; query.length &lt; minSearchLength) &#123;
+        return true
+      &#125;
+      if (flatVisibleOptions().length) &#123;
+        return true
+      &#125;
+      return infinite &amp;&amp; hasMore
+    &#125;
+
+    function canSelect(option) &#123;
+      return !option.disabled
+    &#125;
+
+    function chooseOption(option) &#123;
+      if (!canSelect(option)) &#123;
+        return
+      &#125;
+      selectedValue = option.value
+      query = option.label
+      activeIndex = optionIndex(option)
+      if (closeOnSelect) &#123;
+        open = false
+      &#125;
+    &#125;
+
+    function updateQuery(event) &#123;
+      query = event.target.value
+      selectedValue = allowCustomValue ? event.target.value : &quot;&quot;
+      open = true
+      activeIndex = flatVisibleOptions().length ? 0 : -1
+    &#125;
+
+    function clearValue(event) &#123;
+      if (event) &#123;
+        event.stopPropagation()
+      &#125;
+      query = &quot;&quot;
+      selectedValue = &quot;&quot;
+      activeIndex = -1
+      open = false
+    &#125;
+
+    function openDropdown() &#123;
+      if (!disabled) &#123;
+        open = true
+        activeIndex = flatVisibleOptions().length ? 0 : -1
+      &#125;
+    &#125;
+
+    function closeDropdown() &#123;
+      open = false
+    &#125;
+
+    function toggle() &#123;
+      if (open) &#123;
+        closeDropdown()
+      &#125; else &#123;
+        openDropdown()
+      &#125;
+    &#125;
+
+    function setValue(nextValue) &#123;
+      selectedValue = nextValue
+      query = &quot;&quot;
+    &#125;
+
+    function moveActive(direction) &#123;
+      if (!flatVisibleOptions().length) &#123;
+        return
+      &#125;
+      activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+    &#125;
+
+    function handleKeydown(event) &#123;
+      if (disabled) &#123;
+        return
+      &#125;
+      if (event.key === &quot;ArrowDown&quot;) &#123;
+        event.preventDefault()
+        openDropdown()
+        moveActive(1)
+      &#125; else if (event.key === &quot;ArrowUp&quot;) &#123;
+        event.preventDefault()
+        openDropdown()
+        moveActive(-1)
+      &#125; else if (event.key === &quot;Enter&quot; &amp;&amp; open &amp;&amp; activeIndex &gt;= 0) &#123;
+        event.preventDefault()
+        chooseOption(flatVisibleOptions()[activeIndex])
+      &#125; else if (event.key === &quot;Escape&quot;) &#123;
+        closeDropdown()
+      &#125; else if (event.key === &quot;Home&quot; &amp;&amp; open) &#123;
+        event.preventDefault()
+        activeIndex = 0
+      &#125; else if (event.key === &quot;End&quot; &amp;&amp; open) &#123;
+        event.preventDefault()
+        activeIndex = flatVisibleOptions().length - 1
+      &#125;
+    &#125;
+
+    function optionIndex(option) &#123;
+      return flatVisibleOptions().findIndex((item) =&gt; item.value === option.value)
+    &#125;
+  &#125;
+
+  view &#123;
+        &lt;div
+      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--advanced-select wire-next--combobox &#123;open ? 'wire-next--open' : ''&#125; &#123;fixed ? 'wire-next--advanced-select-fixed' : ''&#125; &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
+      data-placement=&quot;&#123;placement&#125;&quot;
+      data-search-mode=&quot;&#123;searchMode&#125;&quot;
+      data-remote=&quot;&#123;remote ? 'true' : 'false'&#125;&quot;
+      data-remote-url=&quot;&#123;remoteUrl&#125;&quot;
+      data-remote-query-param=&quot;&#123;remoteQueryParam&#125;&quot;
+      data-remote-debounce=&quot;&#123;remoteDebounce&#125;&quot;
+      data-remote-auto-load=&quot;&#123;remoteAutoLoad ? 'true' : 'false'&#125;&quot;
+      data-infinite=&quot;&#123;infinite ? 'true' : 'false'&#125;&quot;
+      data-page=&quot;&#123;page&#125;&quot;
+      data-wrn-select
+      data-wrn-combobox
+      @focusout=&quot;if (!event.currentTarget.contains(event.relatedTarget)) &#123; closeDropdown() &#125;&quot;
+    &gt;
+        &lt;label id=&quot;&#123;name&#125;-label&quot; for=&quot;&#123;name&#125;-input&quot;&gt;&#123;label&#125;&lt;/label&gt;
+        &lt;div class=&quot;wire-next__select-control wire-next__combobox-control&quot;&gt;
+        &lt;span class=&quot;wire-next__search-icon icon-[lucide--search]&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;
+        &lt;input
+          &#123;...attrs&#125;
+          id=&quot;&#123;name&#125;-input&quot;
+          class=&quot;wire-next__select-trigger wire-next__combobox-input&quot;
+          type=&quot;text&quot;
+          role=&quot;combobox&quot;
+          name=&quot;&#123;allowCustomValue ? name : ''&#125;&quot;
+          value=&quot;&#123;inputText()&#125;&quot;
+          placeholder=&quot;&#123;placeholder&#125;&quot;
+          autocomplete=&quot;&#123;autocomplete&#125;&quot;
+          aria-autocomplete=&quot;list&quot;
+          aria-haspopup=&quot;listbox&quot;
+          aria-expanded=&quot;&#123;open&#125;&quot;
+          aria-controls=&quot;&#123;name&#125;-listbox&quot;
+          aria-labelledby=&quot;&#123;name&#125;-label&quot;
+          aria-invalid=&quot;&#123;invalid&#125;&quot;
+          disabled=&quot;&#123;disabled&#125;&quot;
+          required=&quot;&#123;required &amp;&amp; allowCustomValue&#125;&quot;
+          @focus=&quot;openDropdown()&quot;
+          @click=&quot;openDropdown()&quot;
+          @input=&quot;updateQuery(event)&quot;
+          @keydown=&quot;handleKeydown(event)&quot;
+        /&gt;
+        &lt;button
+          type=&quot;button&quot;
+          class=&quot;wire-next__clear-select&quot;
+          data-show=&quot;clearable &amp;&amp; inputText() &amp;&amp; !disabled&quot;
+          aria-label=&quot;&#123;clearLabel&#125;&quot;
+          title=&quot;&#123;clearLabel&#125;&quot;
+          @click=&quot;clearValue(event)&quot;
+        &gt;
+        &lt;span class=&quot;icon-[lucide--x]&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button
+          type=&quot;button&quot;
+          class=&quot;wire-next__combobox-toggle&quot;
+          aria-label=&quot;&#123;toggleLabel&#125;&quot;
+          tabindex=&quot;-1&quot;
+          disabled=&quot;&#123;disabled&#125;&quot;
+          @click=&quot;toggle()&quot;
+        &gt;
+        &lt;span class=&quot;wire-next__select-chevron icon-[lucide--chevrons-up-down]&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+        &lt;/div&gt;
+        &lt;div
+        class=&quot;wire-next__select-dropdown &#123;fixed ? 'wire-next__select-dropdown--fixed' : ''&#125;&quot;
+        data-show=&quot;shouldShowDropdown()&quot;
+        style=&quot;&#123;shouldShowDropdown() ? '' : 'display: none'&#125;&quot;
+      &gt;
+        &lt;div
+          class=&quot;wire-next__select-message&quot;
+          data-show=&quot;remote &amp;&amp; query.length !== 0 &amp;&amp; query.length &lt; minSearchLength&quot;
+        &gt;Enter at least &#123;minSearchLength&#125; characters.&lt;/div&gt;
+        &lt;div class=&quot;wire-next__select-message&quot; data-show=&quot;loading&quot; role=&quot;status&quot;&gt;
+        &lt;i class=&quot;wire-spinner wire-spinner--inline&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;
+          &#123;loadingLabel&#125;
+        &lt;/div&gt;
+        &lt;div
+          id=&quot;&#123;name&#125;-listbox&quot;
+          class=&quot;wire-next__select-list&quot;
+          data-show=&quot;(!remote || (query.length === 0 &amp;&amp; remoteAutoLoad) || query.length &gt;= minSearchLength) &amp;&amp; !loading&quot;
+          role=&quot;listbox&quot;
+        &gt;
+          &#123;#each groups as group&#125;
+            &#123;#if visibleOptions(group.options || []).length&#125;
+              &lt;div class=&quot;wire-next__option-group&quot; role=&quot;group&quot; aria-label=&quot;&#123;group.label&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next__group-label&quot;&gt;&#123;group.label&#125;&lt;/div&gt;
+                &#123;#each group.options || [] as option&#125;
+                  &lt;button
+                    type=&quot;button&quot;
+                    class=&quot;wire-next__select-option &#123;isSelected(option) ? 'wire-next__select-option--selected' : ''&#125; &#123;optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''&#125;&quot;
+                    data-option-value=&quot;&#123;option.value&#125;&quot;
+                    data-show=&quot;matches(option)&quot;
+                    role=&quot;option&quot;
+                    aria-selected=&quot;&#123;isSelected(option)&#125;&quot;
+                    disabled=&quot;&#123;!canSelect(option)&#125;&quot;
+                    @mouseenter=&quot;activeIndex = optionIndex(option)&quot;
+                    @mousedown=&quot;event.preventDefault()&quot;
+                    @click=&quot;chooseOption(option)&quot;
+                  &gt;
+                    &#123;#if optionTemplate === &quot;icon&quot; &amp;&amp; option.icon&#125;&lt;i class=&quot;&#123;option.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                    &#123;#if optionTemplate === &quot;avatar&quot; &amp;&amp; option.avatar&#125;&lt;img src=&quot;&#123;option.avatar&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
+                    &#123;#if optionTemplate === &quot;color&quot; &amp;&amp; option.color&#125;&lt;i class=&quot;wire-next__color-dot&quot; style=&quot;--option-color: &#123;option.color&#125;&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+                    &lt;span&gt;
+        &lt;strong&gt;&#123;option.label&#125;&lt;/strong&gt;&#123;#if option.description&#125;&lt;small&gt;&#123;option.description&#125;&lt;/small&gt;&#123;/if&#125;&lt;/span&gt;
+        &lt;i class=&quot;wire-next__check icon-[lucide--check]&quot; data-show=&quot;isSelected(option)&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;
+        &lt;/button&gt;
+                &#123;/each&#125;
+              &lt;/div&gt;
+            &#123;/if&#125;
+          &#123;/each&#125;
+
+          &#123;#each options as option&#125;
+            &lt;button
+              type=&quot;button&quot;
+              class=&quot;wire-next__select-option &#123;isSelected(option) ? 'wire-next__select-option--selected' : ''&#125; &#123;optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''&#125;&quot;
+              data-option-value=&quot;&#123;option.value&#125;&quot;
+              data-show=&quot;matches(option)&quot;
+              role=&quot;option&quot;
+              aria-selected=&quot;&#123;isSelected(option)&#125;&quot;
+              disabled=&quot;&#123;!canSelect(option)&#125;&quot;
+              @mouseenter=&quot;activeIndex = optionIndex(option)&quot;
+              @mousedown=&quot;event.preventDefault()&quot;
+              @click=&quot;chooseOption(option)&quot;
+            &gt;
+              &#123;#if optionTemplate === &quot;icon&quot; &amp;&amp; option.icon&#125;&lt;i class=&quot;&#123;option.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+              &#123;#if optionTemplate === &quot;avatar&quot; &amp;&amp; option.avatar&#125;&lt;img src=&quot;&#123;option.avatar&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
+              &#123;#if optionTemplate === &quot;color&quot; &amp;&amp; option.color&#125;&lt;i class=&quot;wire-next__color-dot&quot; style=&quot;--option-color: &#123;option.color&#125;&quot;&gt;
+        &lt;/i&gt;&#123;/if&#125;
+              &lt;span&gt;
+        &lt;strong&gt;&#123;option.label&#125;&lt;/strong&gt;&#123;#if option.description&#125;&lt;small&gt;&#123;option.description&#125;&lt;/small&gt;&#123;/if&#125;&lt;/span&gt;
+        &lt;i class=&quot;wire-next__check icon-[lucide--check]&quot; data-show=&quot;isSelected(option)&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&gt;
+        &lt;/button&gt;
+          &#123;/each&#125;
+        &lt;/div&gt;
+        &lt;button
+          type=&quot;button&quot;
+          class=&quot;wire-next__load-more&quot;
+          data-wrn-select-load-more
+          data-show=&quot;infinite &amp;&amp; hasMore&quot;
+        &gt;&#123;loadMoreLabel&#125;&lt;/button&gt;
+        &lt;/div&gt;
+
+      &#123;#if !allowCustomValue&#125;
+        &lt;input
+          type=&quot;hidden&quot;
+          name=&quot;&#123;name&#125;&quot;
+          value=&quot;&#123;selectedValue&#125;&quot;
+          required=&quot;&#123;required&#125;&quot;
+          data-error=&quot;&#123;name&#125;&quot;
+          aria-describedby=&quot;&#123;validationMessage ? `$&#123;name&#125;-validation` : helpText ? `$&#123;name&#125;-help` : ''&#125;&quot;
+        /&gt;
+      &#123;/if&#125;
+
+      &#123;#if helpText &amp;&amp; !validationMessage&#125;&lt;small id=&quot;&#123;name&#125;-help&quot;&gt;&#123;helpText&#125;&lt;/small&gt;&#123;/if&#125;
+      &lt;small
+        id=&quot;&#123;name&#125;-validation&quot;
+        class=&quot;wire-next__validation&quot;
+        data-error=&quot;&#123;name&#125;&quot;
+      &gt;&#123;validationMessage&#125;&lt;/small&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/confetti.wrn b/app/pages/components/confetti.wrn
new file mode 100644
index 00000000..8151731a
--- /dev/null
+++ b/app/pages/components/confetti.wrn
@@ -0,0 +1,46 @@
+page Confetticomponent {
+  seo {
+    title = "Confetti component"
+    description = "Theme-aware, responsive confetti component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Confetti&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;Confetti&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/Confetti.wrn</code></p><pre data-language="wrn"><code>component Confetti &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Confetti&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--confetti wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/container.wrn b/app/pages/components/container.wrn
index e6913ec7..d6cd79bb 100644
--- a/app/pages/components/container.wrn
+++ b/app/pages/components/container.wrn
@@ -1,7 +1,7 @@
 page Containercomponent {
   seo {
     title = "Container component"
-    description = "Reusable container component."
+    description = "Theme-aware, responsive container component."
   }
 
   view {
@@ -10,24 +10,32 @@ 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.4</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.3.5</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">core component</span><h1>Container</h1><p>Reusable container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>2 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.3.5</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;
-/&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>className</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;
+  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;
   props &#123;
     size = &quot;default&quot;
-    className = &quot;&quot;
+    color = &quot;primary&quot;
+    columns = 2
+    gap = &quot;md&quot;
+    maxWidth = &quot;xl&quot;
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;w-full &#123;size === 'narrow' ? 'max-w-3xl' : size === 'wide' ? 'max-w-screen-2xl' : 'max-w-7xl'&#125; &#123;className&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--container wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#125;&quot;&gt;
         &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/context-menu.wrn b/app/pages/components/context-menu.wrn
index 7fc9109d..337727ca 100644
--- a/app/pages/components/context-menu.wrn
+++ b/app/pages/components/context-menu.wrn
@@ -1,7 +1,7 @@
 page ContextMenucomponent {
   seo {
     title = "ContextMenu component"
-    description = "Reusable context menu component."
+    description = "Theme-aware, responsive context menu component."
   }
 
   view {
@@ -10,37 +10,39 @@ 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.4</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.3.5</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>Reusable context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;ContextMenu
-  title=&quot;title&quot;
+      <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.5</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;
   description=&quot;description&quot;
   open=&quot;false&quot;
-  closeLabel=&quot;Close&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContextMenu&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>title</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>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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/ContextMenu.wrn</code></p><pre data-language="wrn"><code>component ContextMenu &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContextMenu&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;Context Menu&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/ContextMenu.wrn</code></p><pre data-language="wrn"><code>component ContextMenu &#123;
   props &#123;
-    title = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Context Menu&quot;
     description = &quot;&quot;
     open = false
+    placement = &quot;bottom&quot;
     closeLabel = &quot;Close&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;
-        &lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;
+        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--context-menu wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
         &lt;header&gt;
-        &lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;
-        &lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;
+        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
         &lt;/header&gt;
-        &lt;slot /&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;
-        &lt;/section&gt;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/copy-markup.wrn b/app/pages/components/copy-markup.wrn
new file mode 100644
index 00000000..22b9571b
--- /dev/null
+++ b/app/pages/components/copy-markup.wrn
@@ -0,0 +1,50 @@
+page CopyMarkupcomponent {
+  seo {
+    title = "CopyMarkup component"
+    description = "Theme-aware, responsive copy markup component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  name=&quot;name&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CopyMarkup&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;Copy Markup&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/CopyMarkup.wrn</code></p><pre data-language="wrn"><code>component CopyMarkup &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Copy Markup&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&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--copy-markup &#123;class&#125;&quot;&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;
+    &#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.5</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>
+  }
+}
diff --git a/app/pages/components/custom-scrollbar.wrn b/app/pages/components/custom-scrollbar.wrn
new file mode 100644
index 00000000..09a814c3
--- /dev/null
+++ b/app/pages/components/custom-scrollbar.wrn
@@ -0,0 +1,42 @@
+page CustomScrollbarcomponent {
+  seo {
+    title = "CustomScrollbar component"
+    description = "Theme-aware, responsive custom scrollbar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  gap=&quot;md&quot;
+  maxWidth=&quot;xl&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CustomScrollbar&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/CustomScrollbar.wrn</code></p><pre data-language="wrn"><code>component CustomScrollbar &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    columns = 2
+    gap = &quot;md&quot;
+    maxWidth = &quot;xl&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--custom-scrollbar wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#125;&quot;&gt;
+        &lt;slot /&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/data-map.wrn b/app/pages/components/data-map.wrn
new file mode 100644
index 00000000..fa0ddf3d
--- /dev/null
+++ b/app/pages/components/data-map.wrn
@@ -0,0 +1,46 @@
+page DataMapcomponent {
+  seo {
+    title = "DataMap component"
+    description = "Theme-aware, responsive data map component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataMap&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;Data Map&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/DataMap.wrn</code></p><pre data-language="wrn"><code>component DataMap &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Data Map&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--data-map wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/data-table.wrn b/app/pages/components/data-table.wrn
index 1f9b24e0..d0ae8e29 100644
--- a/app/pages/components/data-table.wrn
+++ b/app/pages/components/data-table.wrn
@@ -1,7 +1,7 @@
 page DataTablecomponent {
   seo {
     title = "DataTable component"
-    description = "Reusable data table component."
+    description = "Theme-aware, responsive data table component."
   }
 
   view {
@@ -10,40 +10,40 @@ 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.4</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.3.5</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">data component</span><h1>DataTable</h1><p>Reusable data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>6 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;DataTable
-  caption=&quot;Data table&quot;
+      <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.5</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;
   columns=&quot;[]&quot;
   rows=&quot;[]&quot;
-  emptyMessage=&quot;No data available.&quot;
-  striped=&quot;false&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataTable&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>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Data 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>emptyMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No data available.&quot;</code></td></tr><tr><td><code>striped</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/DataTable.wrn</code></p><pre data-language="wrn"><code>component DataTable &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataTable&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;Data 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/DataTable.wrn</code></p><pre data-language="wrn"><code>component DataTable &#123;
   props &#123;
-    caption = &quot;Data table&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    caption = &quot;Data Table&quot;
     columns = []
     rows = []
-    emptyMessage = &quot;No data available.&quot;
-    striped = false
+    striped = true
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;wire-table-wrap &#123;class&#125;&quot; tabindex=&quot;0&quot; role=&quot;region&quot; aria-label=&quot;&#123;caption&#125;&quot;&gt;
-        &lt;table class=&quot;wire-table &#123;striped ? 'wire-table--striped' : ''&#125;&quot;&gt;
-        &lt;caption class=&quot;wire-visually-hidden&quot;&gt;&#123;caption&#125;&lt;/caption&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--table &#123;class&#125;&quot;&gt;
+        &lt;table&gt;
+        &lt;caption&gt;&#123;caption&#125;&lt;/caption&gt;
         &lt;thead&gt;
-        &lt;tr&gt;&#123;#each columns as column&#125;&lt;th scope=&quot;col&quot;&gt;&#123;column.label&#125;&lt;/th&gt;&#123;/each&#125;&lt;/tr&gt;
+        &lt;tr&gt;&#123;#each columns as column&#125;&lt;th&gt;&#123;column.label&#125;&lt;/th&gt;&#123;/each&#125;&lt;/tr&gt;
         &lt;/thead&gt;
-        &lt;tbody&gt;&#123;#each rows as row&#125;&lt;tr&gt;&#123;#each columns as column&#125;&lt;td&gt;&#123;row[column.key]&#125;&lt;/td&gt;&#123;/each&#125;&lt;/tr&gt;&#123;:empty&#125;&lt;tr&gt;
-        &lt;td colspan=&quot;&#123;columns.length&#125;&quot;&gt;&#123;emptyMessage&#125;&lt;/td&gt;
-        &lt;/tr&gt;&#123;/each&#125;&lt;/tbody&gt;
+        &lt;tbody&gt;&#123;#each rows as row&#125;&lt;tr&gt;&#123;#each columns as column&#125;&lt;td&gt;&#123;row[column.key]&#125;&lt;/td&gt;&#123;/each&#125;&lt;/tr&gt;&#123;/each&#125;&lt;/tbody&gt;
         &lt;/table&gt;
+        &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/date-picker.wrn b/app/pages/components/date-picker.wrn
index b985c102..f086e01e 100644
--- a/app/pages/components/date-picker.wrn
+++ b/app/pages/components/date-picker.wrn
@@ -1,7 +1,7 @@
 page DatePickercomponent {
   seo {
     title = "DatePicker component"
-    description = "Reusable date picker component."
+    description = "Theme-aware, responsive date picker component."
   }
 
   view {
@@ -10,32 +10,40 @@ 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.4</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.3.5</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">forms component</span><h1>DatePicker</h1><p>Reusable date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;DatePicker
-  id=&quot;date&quot;
-  name=&quot;date&quot;
-  label=&quot;Date&quot;
+      <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.5</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;
+  name=&quot;name&quot;
   value=&quot;value&quot;
-  min=&quot;min&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DatePicker&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>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;date&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;date&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date&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>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>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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/DatePicker.wrn</code></p><pre data-language="wrn"><code>component DatePicker &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DatePicker&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;Date Picker&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;date&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/DatePicker.wrn</code></p><pre data-language="wrn"><code>component DatePicker &#123;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Date Picker&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;date&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = &quot;&quot;
+    disabled = false
+    required = false
     class = &quot;&quot;
-    id: string = &quot;date&quot;
-    name: string = &quot;date&quot;
-    label: string = &quot;Date&quot;
-    value: string = &quot;&quot;
-    min: string = &quot;&quot;
-    max: string = &quot;&quot;
-    required: boolean = false
   &#125;
   view &#123;
-        &lt;DateInput class=&quot;&#123;class&#125;&quot; id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; label=&quot;&#123;label&#125;&quot; value=&quot;&#123;value&#125;&quot; required=&quot;&#123;required&#125;&quot; /&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--date-picker &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/device-frame.wrn b/app/pages/components/device-frame.wrn
new file mode 100644
index 00000000..f6d81146
--- /dev/null
+++ b/app/pages/components/device-frame.wrn
@@ -0,0 +1,46 @@
+page DeviceFramecomponent {
+  seo {
+    title = "DeviceFrame component"
+    description = "Theme-aware, responsive device frame component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeviceFrame&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;Device Frame&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/DeviceFrame.wrn</code></p><pre data-language="wrn"><code>component DeviceFrame &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Device Frame&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--device-frame wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/divider.wrn b/app/pages/components/divider.wrn
index 0bffc687..a69ed5bc 100644
--- a/app/pages/components/divider.wrn
+++ b/app/pages/components/divider.wrn
@@ -1,7 +1,7 @@
 page Dividercomponent {
   seo {
     title = "Divider component"
-    description = "Reusable divider component."
+    description = "Theme-aware, responsive divider component."
   }
 
   view {
@@ -10,21 +10,28 @@ 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.4</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.3.5</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">core component</span><h1>Divider</h1><p>Reusable divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>1 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;Divider /&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>className</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/Divider.wrn</code></p><pre data-language="wrn"><code>component Divider &#123;
+      <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.5</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;
   props &#123;
-    className = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;h-px w-full bg-slate-200 dark:bg-slate-800 &#123;className&#125;&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/div&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--divider wire-next--divider-&#123;orientation&#125; &#123;class&#125;&quot; role=&quot;separator&quot; aria-orientation=&quot;&#123;orientation&#125;&quot;&gt;&#123;#if label&#125;&lt;span&gt;&#123;label&#125;&lt;/span&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/drag-and-drop.wrn b/app/pages/components/drag-and-drop.wrn
new file mode 100644
index 00000000..b4ce7388
--- /dev/null
+++ b/app/pages/components/drag-and-drop.wrn
@@ -0,0 +1,46 @@
+page DragAndDropcomponent {
+  seo {
+    title = "DragAndDrop component"
+    description = "Theme-aware, responsive drag and drop component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DragAndDrop&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;Drag And Drop&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/DragAndDrop.wrn</code></p><pre data-language="wrn"><code>component DragAndDrop &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Drag And Drop&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--drag-and-drop wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/drawer.wrn b/app/pages/components/drawer.wrn
index 254d0baa..082803e8 100644
--- a/app/pages/components/drawer.wrn
+++ b/app/pages/components/drawer.wrn
@@ -1,7 +1,7 @@
 page Drawercomponent {
   seo {
     title = "Drawer component"
-    description = "Reusable drawer component."
+    description = "Theme-aware, responsive drawer component."
   }
 
   view {
@@ -10,39 +10,39 @@ 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.4</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.3.5</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">core component</span><h1>Drawer</h1><p>Reusable drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>4 props</span><span>1 slots</span><span>1 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
-  title=&quot;Panel&quot;
+      <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.5</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;
+  description=&quot;description&quot;
   open=&quot;false&quot;
-  side=&quot;right&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Drawer&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>class</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;Panel&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>side</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;right&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><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Drawer.wrn</code></p><pre data-language="wrn"><code>component Drawer &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Drawer&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;Drawer&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/Drawer.wrn</code></p><pre data-language="wrn"><code>component Drawer &#123;
   props &#123;
-    class = &quot;&quot;
-    title = &quot;Panel&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Drawer&quot;
+    description = &quot;&quot;
     open = false
-    side = &quot;right&quot;
+    placement = &quot;bottom&quot;
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
   &#125;
-  state visible = open
   view &#123;
-        &lt;div data-show=&quot;visible&quot; class=&quot;fixed inset-0 z-50 &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot;&gt;
-        &lt;button class=&quot;absolute inset-0 bg-slate-950/50&quot; aria-label=&quot;Close&quot; @click=&quot;visible = false&quot;&gt;
-        &lt;/button&gt;
-        &lt;aside class=&quot;absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 &#123;side === 'left' ? 'left-0' : 'right-0'&#125;&quot;&gt;
-        &lt;header class=&quot;flex items-center justify-between&quot;&gt;
-        &lt;h2 class=&quot;text-xl font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;
-        &lt;button @click=&quot;visible = false&quot; class=&quot;size-10 rounded-xl hover:bg-slate-100&quot;&gt;×&lt;/button&gt;
+        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--drawer wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
+        &lt;header&gt;
+        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
         &lt;/header&gt;
-        &lt;div class=&quot;mt-6&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/div&gt;
-        &lt;/aside&gt;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/dropdown.wrn b/app/pages/components/dropdown.wrn
new file mode 100644
index 00000000..777bb40d
--- /dev/null
+++ b/app/pages/components/dropdown.wrn
@@ -0,0 +1,49 @@
+page Dropdowncomponent {
+  seo {
+    title = "Dropdown component"
+    description = "Theme-aware, responsive dropdown component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  open=&quot;false&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Dropdown&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;Dropdown&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/Dropdown.wrn</code></p><pre data-language="wrn"><code>component Dropdown &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Dropdown&quot;
+    description = &quot;&quot;
+    open = false
+    placement = &quot;bottom&quot;
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--dropdown wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
+        &lt;header&gt;
+        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
+        &lt;/header&gt;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/file-input.wrn b/app/pages/components/file-input.wrn
index 5c452147..464e4982 100644
--- a/app/pages/components/file-input.wrn
+++ b/app/pages/components/file-input.wrn
@@ -1,7 +1,7 @@
 page FileInputcomponent {
   seo {
     title = "FileInput component"
-    description = "Reusable file input component."
+    description = "Theme-aware, responsive file input component."
   }
 
   view {
@@ -10,42 +10,40 @@ 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.4</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.3.5</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>Reusable file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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;FileInput
-  label=&quot;File&quot;
+      <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.5</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;
   name=&quot;name&quot;
   value=&quot;value&quot;
-  placeholder=&quot;placeholder&quot;
-  type=&quot;text&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileInput&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;File&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>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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/FileInput.wrn</code></p><pre data-language="wrn"><code>component FileInput &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileInput&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;File 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;file&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/FileInput.wrn</code></p><pre data-language="wrn"><code>component FileInput &#123;
   props &#123;
-    label = &quot;File&quot; 
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;File Input&quot;
     name = &quot;&quot;
     value = &quot;&quot;
     placeholder = &quot;&quot;
-    type = &quot;text&quot;
-    required = false
+    type = &quot;file&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = &quot;&quot;
     disabled = false
-    readonly = false
-    help = &quot;&quot;
-    error = &quot;&quot;
+    required = false
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;
-        &lt;/span&gt;
-        &lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;
-        &lt;slot /&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--file-input &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/file-upload-progress.wrn b/app/pages/components/file-upload-progress.wrn
new file mode 100644
index 00000000..bbc68f7d
--- /dev/null
+++ b/app/pages/components/file-upload-progress.wrn
@@ -0,0 +1,46 @@
+page FileUploadProgresscomponent {
+  seo {
+    title = "FileUploadProgress component"
+    description = "Theme-aware, responsive file upload progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  value=&quot;50&quot;
+  max=&quot;100&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileUploadProgress&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/FileUploadProgress.wrn</code></p><pre data-language="wrn"><code>component FileUploadProgress &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Progress&quot;
+    value = 50
+    max = 100
+    showValue = true
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--file-upload-progress &#123;class&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next__row&quot;&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;&#123;#if showValue&#125;&lt;strong&gt;&#123;value&#125;%&lt;/strong&gt;&#123;/if&#125;&lt;/div&gt;
+        &lt;progress value=&quot;&#123;value&#125;&quot; max=&quot;&#123;max&#125;&quot;&gt;
+        &lt;/progress&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/file-upload.wrn b/app/pages/components/file-upload.wrn
index 694ab3b9..3d9c94e5 100644
--- a/app/pages/components/file-upload.wrn
+++ b/app/pages/components/file-upload.wrn
@@ -1,7 +1,7 @@
 page FileUploadcomponent {
   seo {
     title = "FileUpload component"
-    description = "Reusable file upload component."
+    description = "Theme-aware, responsive file upload component."
   }
 
   view {
@@ -10,36 +10,36 @@ 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.4</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.3.5</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">content component</span><h1>FileUpload</h1><p>Reusable file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;FileUpload
-  id=&quot;file&quot;
-  name=&quot;file&quot;
-  label=&quot;Upload file&quot;
-  accept=&quot;accept&quot;
-  multiple=&quot;false&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileUpload&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>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;file&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;file&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Upload file&quot;</code></td></tr><tr><td><code>accept</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&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>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Drag and drop or browse&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/FileUpload.wrn</code></p><pre data-language="wrn"><code>component FileUpload &#123;
+      <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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileUpload&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;File Upload&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/FileUpload.wrn</code></p><pre data-language="wrn"><code>component FileUpload &#123;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;File Upload&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
-    id = &quot;file&quot;
-    name = &quot;file&quot;
-    label = &quot;Upload file&quot;
-    accept = &quot;&quot;
-    multiple = false
-    help = &quot;Drag and drop or browse&quot;
   &#125;
   view &#123;
-        &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50 &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;text-3xl&quot; aria-hidden=&quot;true&quot;&gt;⇧&lt;/span&gt;
-        &lt;span class=&quot;mt-2 font-semibold&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;span class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;file&quot; accept=&quot;&#123;accept&#125;&quot; multiple=&quot;&#123;multiple&#125;&quot; class=&quot;sr-only&quot; /&gt;
-        &lt;/label&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--file-upload wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/grid.wrn b/app/pages/components/grid.wrn
index 93496807..fe24bfc6 100644
--- a/app/pages/components/grid.wrn
+++ b/app/pages/components/grid.wrn
@@ -1,7 +1,7 @@
 page Gridcomponent {
   seo {
     title = "Grid component"
-    description = "Reusable grid component."
+    description = "Theme-aware, responsive grid component."
   }
 
   view {
@@ -10,24 +10,32 @@ 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.4</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.3.5</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">data component</span><h1>Grid</h1><p>Reusable grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>2 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
-  gap=&quot;4&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>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>className</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;
+      <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.5</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;
   props &#123;
-    gap = &quot;4&quot;
-    className = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    columns = 2
+    gap = &quot;md&quot;
+    maxWidth = &quot;xl&quot;
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;grid gap-&#123;gap&#125; &#123;className&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--grid wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#125;&quot;&gt;
         &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/image.wrn b/app/pages/components/image.wrn
new file mode 100644
index 00000000..98e81870
--- /dev/null
+++ b/app/pages/components/image.wrn
@@ -0,0 +1,46 @@
+page Imagecomponent {
+  seo {
+    title = "Image component"
+    description = "Theme-aware, responsive image component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  alt=&quot;alt&quot;
+  width=&quot;width&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Image&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>src</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>width</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>height</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>string</code></td><td>Optional</td><td><code>&quot;lazy&quot;</code></td></tr><tr><td><code>rounded</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><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/Image.wrn</code></p><pre data-language="wrn"><code>component Image &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    src = &quot;&quot;
+    alt = &quot;&quot;
+    width = &quot;&quot;
+    height = &quot;&quot;
+    loading = &quot;lazy&quot;
+    rounded = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;figure class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--image &#123;rounded ? 'wire-next--rounded' : ''&#125; &#123;class&#125;&quot;&gt;
+        &lt;img src=&quot;&#123;src&#125;&quot; alt=&quot;&#123;alt&#125;&quot; width=&quot;&#123;width&#125;&quot; height=&quot;&#123;height&#125;&quot; loading=&quot;&#123;loading&#125;&quot; /&gt;
+        &lt;slot /&gt;
+        &lt;/figure&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.5</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>
+  }
+}
diff --git a/app/pages/components/input-group.wrn b/app/pages/components/input-group.wrn
index 2e3751fd..919cbc3f 100644
--- a/app/pages/components/input-group.wrn
+++ b/app/pages/components/input-group.wrn
@@ -1,7 +1,7 @@
 page InputGroupcomponent {
   seo {
     title = "InputGroup component"
-    description = "Reusable input group component."
+    description = "Theme-aware, responsive input group component."
   }
 
   view {
@@ -10,42 +10,40 @@ 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.4</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.3.5</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>Reusable input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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;InputGroup
-  label=&quot;Input&quot;
+      <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.5</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;
   name=&quot;name&quot;
   value=&quot;value&quot;
-  placeholder=&quot;placeholder&quot;
-  type=&quot;text&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InputGroup&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;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>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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/InputGroup.wrn</code></p><pre data-language="wrn"><code>component InputGroup &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InputGroup&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 Group&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/InputGroup.wrn</code></p><pre data-language="wrn"><code>component InputGroup &#123;
   props &#123;
-    label = &quot;Input&quot; 
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Input Group&quot;
     name = &quot;&quot;
     value = &quot;&quot;
     placeholder = &quot;&quot;
     type = &quot;text&quot;
-    required = false
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = &quot;&quot;
     disabled = false
-    readonly = false
-    help = &quot;&quot;
-    error = &quot;&quot;
+    required = false
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;
-        &lt;/span&gt;
-        &lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;
-        &lt;slot /&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--input-group &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/input-number.wrn b/app/pages/components/input-number.wrn
new file mode 100644
index 00000000..c160e26a
--- /dev/null
+++ b/app/pages/components/input-number.wrn
@@ -0,0 +1,50 @@
+page InputNumbercomponent {
+  seo {
+    title = "InputNumber component"
+    description = "Theme-aware, responsive input number component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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
+  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;
+        &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;
+    &#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.5</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>
+  }
+}
diff --git a/app/pages/components/input.wrn b/app/pages/components/input.wrn
index 11345179..2a69f4c6 100644
--- a/app/pages/components/input.wrn
+++ b/app/pages/components/input.wrn
@@ -1,7 +1,7 @@
-page inputcomponent {
+page Inputcomponent {
   seo {
-    title = "input component"
-    description = "Reusable input component."
+    title = "Input component"
+    description = "Theme-aware, responsive input component."
   }
 
   view {
@@ -10,29 +10,40 @@ 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.4</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.3.5</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">core component</span><h1>input</h1><p>Reusable input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;input
-  type=&quot;text&quot;
+      <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.5</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;
-  placeholder=&quot;placeholder&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>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&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>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>// Text input. Pairs with the validation system (name maps to a field).
-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;
-    type = &quot;text&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Input&quot;
     name = &quot;&quot;
     value = &quot;&quot;
     placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = &quot;&quot;
+    disabled = false
+    required = false
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;input type=&quot;&#123;type&#125;&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; class=&quot;wire-input &#123;class&#125;&quot;&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--input &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/kbd.wrn b/app/pages/components/kbd.wrn
new file mode 100644
index 00000000..31aef04e
--- /dev/null
+++ b/app/pages/components/kbd.wrn
@@ -0,0 +1,38 @@
+page Kbdcomponent {
+  seo {
+    title = "Kbd component"
+    description = "Theme-aware, responsive kbd component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Kbd&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;⌘ K&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/Kbd.wrn</code></p><pre data-language="wrn"><code>component Kbd &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;⌘ K&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;kbd class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--kbd &#123;class&#125;&quot;&gt;
+        &lt;slot&gt;&#123;label&#125;&lt;/slot&gt;
+        &lt;/kbd&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.5</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>
+  }
+}
diff --git a/app/pages/components/layout-splitter.wrn b/app/pages/components/layout-splitter.wrn
new file mode 100644
index 00000000..d4739a04
--- /dev/null
+++ b/app/pages/components/layout-splitter.wrn
@@ -0,0 +1,42 @@
+page LayoutSplittercomponent {
+  seo {
+    title = "LayoutSplitter component"
+    description = "Theme-aware, responsive layout splitter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  gap=&quot;md&quot;
+  maxWidth=&quot;xl&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LayoutSplitter&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/LayoutSplitter.wrn</code></p><pre data-language="wrn"><code>component LayoutSplitter &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    columns = 2
+    gap = &quot;md&quot;
+    maxWidth = &quot;xl&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--layout-splitter wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#125;&quot;&gt;
+        &lt;slot /&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/legend-indicator.wrn b/app/pages/components/legend-indicator.wrn
new file mode 100644
index 00000000..45a50c53
--- /dev/null
+++ b/app/pages/components/legend-indicator.wrn
@@ -0,0 +1,46 @@
+page LegendIndicatorcomponent {
+  seo {
+    title = "LegendIndicator component"
+    description = "Theme-aware, responsive legend indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegendIndicator&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;Legend Indicator&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/LegendIndicator.wrn</code></p><pre data-language="wrn"><code>component LegendIndicator &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Legend Indicator&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--legend-indicator wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/link.wrn b/app/pages/components/link.wrn
index 2399ee54..0f2704f0 100644
--- a/app/pages/components/link.wrn
+++ b/app/pages/components/link.wrn
@@ -1,7 +1,7 @@
 page Linkcomponent {
   seo {
     title = "Link component"
-    description = "Reusable link component."
+    description = "Theme-aware, responsive link component."
   }
 
   view {
@@ -10,27 +10,33 @@ 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.4</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.3.5</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">core component</span><h1>Link</h1><p>Reusable link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>4 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;Link
-  href=&quot;#&quot;
+      <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.5</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;
-  external=&quot;false&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Link&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>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Link&quot;</code></td></tr><tr><td><code>external</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>className</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/Link.wrn</code></p><pre data-language="wrn"><code>component Link &#123;
+  href=&quot;#&quot;
+  target=&quot;target&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Link&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;Link&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>external</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><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/Link.wrn</code></p><pre data-language="wrn"><code>component Link &#123;
   props &#123;
-    href = &quot;#&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
     label = &quot;Link&quot;
+    href = &quot;#&quot;
+    target = &quot;&quot;
+    rel = &quot;&quot;
     external = false
-    className = &quot;&quot;
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;a href=&quot;&#123;href&#125;&quot; target=&quot;&#123;external ? '_blank' : ''&#125;&quot; rel=&quot;&#123;external ? 'noreferrer' : ''&#125;&quot; class=&quot;font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 &#123;className&#125;&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;external&quot; aria-hidden=&quot;true&quot;&gt; ↗&lt;/span&gt;
-        &lt;/a&gt;
+        &lt;a &#123;...attrs&#125; href=&quot;&#123;href&#125;&quot; target=&quot;&#123;target&#125;&quot; rel=&quot;&#123;rel&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--link &#123;class&#125;&quot;&gt;
+        &lt;slot&gt;&#123;label&#125;&lt;/slot&gt;&#123;#if external&#125;&lt;span aria-hidden=&quot;true&quot;&gt;↗&lt;/span&gt;&#123;/if&#125;&lt;/a&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/list-group.wrn b/app/pages/components/list-group.wrn
new file mode 100644
index 00000000..3144f56a
--- /dev/null
+++ b/app/pages/components/list-group.wrn
@@ -0,0 +1,46 @@
+page ListGroupcomponent {
+  seo {
+    title = "ListGroup component"
+    description = "Theme-aware, responsive list group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ListGroup&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;List Group&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/ListGroup.wrn</code></p><pre data-language="wrn"><code>component ListGroup &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;List Group&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--list-group wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/list.wrn b/app/pages/components/list.wrn
index 04da69ef..ad57ede8 100644
--- a/app/pages/components/list.wrn
+++ b/app/pages/components/list.wrn
@@ -1,7 +1,7 @@
 page Listcomponent {
   seo {
     title = "List component"
-    description = "Reusable list component."
+    description = "Theme-aware, responsive list component."
   }
 
   view {
@@ -10,37 +10,36 @@ 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.4</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.3.5</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">data component</span><h1>List</h1><p>Reusable list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;List
-  title=&quot;title&quot;
+      <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.5</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;
   description=&quot;description&quot;
-  empty=&quot;false&quot;
-  emptyText=&quot;No items available.&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;List&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>title</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&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/List.wrn</code></p><pre data-language="wrn"><code>component List &#123;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;List&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;List&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/List.wrn</code></p><pre data-language="wrn"><code>component List &#123;
   props &#123;
-    title = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;List&quot;
     description = &quot;&quot;
-    empty = false
-    emptyText = &quot;No items available.&quot;
+    items = []
+    variant = &quot;default&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;
-        &lt;header data-show=&quot;title || description&quot;&gt;
-        &lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;
-        &lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;
-        &lt;/header&gt;
-        &lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/div&gt;
-        &lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--list wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
         &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/map.wrn b/app/pages/components/map.wrn
new file mode 100644
index 00000000..8dade8e3
--- /dev/null
+++ b/app/pages/components/map.wrn
@@ -0,0 +1,46 @@
+page Mapcomponent {
+  seo {
+    title = "Map component"
+    description = "Theme-aware, responsive map component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Map&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;Map&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/Map.wrn</code></p><pre data-language="wrn"><code>component Map &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Map&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--map wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/marquee.wrn b/app/pages/components/marquee.wrn
new file mode 100644
index 00000000..59b5e4f3
--- /dev/null
+++ b/app/pages/components/marquee.wrn
@@ -0,0 +1,46 @@
+page Marqueecomponent {
+  seo {
+    title = "Marquee component"
+    description = "Theme-aware, responsive marquee component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Marquee&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;Marquee&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/Marquee.wrn</code></p><pre data-language="wrn"><code>component Marquee &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Marquee&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--marquee wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/mega-menu.wrn b/app/pages/components/mega-menu.wrn
index c71c7701..bad2947f 100644
--- a/app/pages/components/mega-menu.wrn
+++ b/app/pages/components/mega-menu.wrn
@@ -1,7 +1,7 @@
 page MegaMenucomponent {
   seo {
     title = "MegaMenu component"
-    description = "Reusable mega menu component."
+    description = "Theme-aware, responsive mega menu component."
   }
 
   view {
@@ -10,34 +10,34 @@ 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.4</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.3.5</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">overlays component</span><h1>MegaMenu</h1><p>Reusable mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 props</span><span>0 slots</span><span>1 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
-  label=&quot;Explore&quot;
-  sections=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MegaMenu&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;Explore&quot;</code></td></tr><tr><td><code>sections</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MegaMenu.wrn</code></p><pre data-language="wrn"><code>component MegaMenu &#123;
+      <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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MegaMenu&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;Mega Menu&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>active</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><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/MegaMenu.wrn</code></p><pre data-language="wrn"><code>component MegaMenu &#123;
   props &#123;
-    label = &quot;Explore&quot;
-    sections = []
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Mega Menu&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
     class = &quot;&quot;
   &#125;
-  state open = false
   view &#123;
-        &lt;div class=&quot;wire-mega-menu &#123;class&#125;&quot;&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-mega-menu__trigger&quot; aria-expanded=&quot;&#123;open&#125;&quot; @click=&quot;open = !open&quot;&gt;&#123;label&#125;&lt;span aria-hidden=&quot;true&quot;&gt;⌄&lt;/span&gt;
-        &lt;/button&gt;
-        &lt;div data-show=&quot;open&quot; class=&quot;wire-mega-menu__panel&quot;&gt;&#123;#each sections as section&#125;&lt;section&gt;
-        &lt;h3&gt;&#123;section.title&#125;&lt;/h3&gt;
-        &lt;ul&gt;&#123;#each section.items as item&#125;&lt;li&gt;
-        &lt;a href=&quot;&#123;item.href&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;
-        &lt;/li&gt;&#123;/each&#125;&lt;/ul&gt;
-        &lt;/section&gt;&#123;/each&#125;&lt;/div&gt;
-        &lt;/div&gt;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--mega-menu wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/modal.wrn b/app/pages/components/modal.wrn
index 4c871699..98206656 100644
--- a/app/pages/components/modal.wrn
+++ b/app/pages/components/modal.wrn
@@ -1,7 +1,7 @@
 page Modalcomponent {
   seo {
     title = "Modal component"
-    description = "Reusable modal component."
+    description = "Theme-aware, responsive modal component."
   }
 
   view {
@@ -10,46 +10,39 @@ 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.4</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.3.5</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">core component</span><h1>Modal</h1><p>Reusable modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>6 props</span><span>1 slots</span><span>1 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
-  title=&quot;Dialog&quot;
+      <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.5</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;
   description=&quot;description&quot;
   open=&quot;false&quot;
-  size=&quot;md&quot;
-  closeLabel=&quot;Close&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Modal&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>class</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;Dialog&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&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></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Modal.wrn</code></p><pre data-language="wrn"><code>component Modal &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Modal&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;Modal&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/Modal.wrn</code></p><pre data-language="wrn"><code>component Modal &#123;
   props &#123;
-    class = &quot;&quot;
-    title = &quot;Dialog&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Modal&quot;
     description = &quot;&quot;
     open = false
-    size = &quot;md&quot;
+    placement = &quot;bottom&quot;
     closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
   &#125;
-  state visible = open
   view &#123;
-        &lt;div data-show=&quot;visible&quot; class=&quot;fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-labelledby=&quot;modal-title&quot;&gt;
-        &lt;button class=&quot;absolute inset-0 bg-slate-950/60 backdrop-blur-sm&quot; aria-label=&quot;&#123;closeLabel&#125;&quot; @click=&quot;visible = false&quot;&gt;
-        &lt;/button&gt;
-        &lt;section class=&quot;relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 &#123;size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'&#125;&quot;&gt;
-        &lt;header class=&quot;flex items-start justify-between gap-4&quot;&gt;
-        &lt;div&gt;
-        &lt;h2 id=&quot;modal-title&quot; class=&quot;text-xl font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;
-        &lt;p data-show=&quot;description&quot; class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/p&gt;
-        &lt;/div&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot; @click=&quot;visible = false&quot; class=&quot;inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800&quot;&gt;×&lt;/button&gt;
+        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--modal wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
+        &lt;header&gt;
+        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
         &lt;/header&gt;
-        &lt;div class=&quot;mt-5&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/div&gt;
-        &lt;/section&gt;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/nav.wrn b/app/pages/components/nav.wrn
new file mode 100644
index 00000000..27b449d7
--- /dev/null
+++ b/app/pages/components/nav.wrn
@@ -0,0 +1,44 @@
+page Navcomponent {
+  seo {
+    title = "Nav component"
+    description = "Theme-aware, responsive nav component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Nav&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;Nav&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>active</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><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/Nav.wrn</code></p><pre data-language="wrn"><code>component Nav &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Nav&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--nav wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.5</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>
+  }
+}
diff --git a/app/pages/components/navbar.wrn b/app/pages/components/navbar.wrn
new file mode 100644
index 00000000..33002b02
--- /dev/null
+++ b/app/pages/components/navbar.wrn
@@ -0,0 +1,44 @@
+page Navbarcomponent {
+  seo {
+    title = "Navbar component"
+    description = "Theme-aware, responsive navbar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Navbar&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;Navbar&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>active</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><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/Navbar.wrn</code></p><pre data-language="wrn"><code>component Navbar &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Navbar&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--navbar wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.5</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>
+  }
+}
diff --git a/app/pages/components/pagination.wrn b/app/pages/components/pagination.wrn
index e3d84d9d..b4f5b3db 100644
--- a/app/pages/components/pagination.wrn
+++ b/app/pages/components/pagination.wrn
@@ -1,7 +1,7 @@
 page Paginationcomponent {
   seo {
     title = "Pagination component"
-    description = "Reusable pagination component."
+    description = "Theme-aware, responsive pagination component."
   }
 
   view {
@@ -10,196 +10,34 @@ 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.4</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.3.5</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">core component</span><h1>Pagination</h1><p>Reusable pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>12 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;Pagination
-  currentPage=&quot;1&quot;
-  totalPages=&quot;1&quot;
-  previousHref=&quot;previousHref&quot;
-  nextHref=&quot;nextHref&quot;
-  pages=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Pagination&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>currentPage</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>totalPages</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>previousHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>nextHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>pages</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>showNumbers</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showSummary</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>totalItems</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>pageSize</code></td><td><code>number</code></td><td>Optional</td><td><code>10</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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/Pagination.wrn</code></p><pre data-language="wrn"><code>component Pagination &#123;
-    props &#123;
-        class: string = &quot;&quot;
-        currentPage = 1
-        totalPages = 1
-
-        previousHref = &quot;&quot;
-        nextHref = &quot;&quot;
-
-        pages = []
-
-        showNumbers = true
-        showSummary = true
-
-        totalItems = 0
-        pageSize = 10
-
-        compact = false
-        centered = false
-    &#125;
-
-    view &#123;
-        &lt;nav
-            aria-label=&quot;Pagination&quot;
-            class=&quot;w-full &#123;class&#125;&quot;
-            class:hidden=&quot;totalPages &lt;= 1&quot;
-        &gt;
-        &lt;!-- Result summary --&gt;
-        &lt;div
-                class=&quot;mb-4 text-sm text-slate-500 dark:text-slate-400&quot;
-                class:hidden=&quot;!showSummary || totalItems &lt;= 0&quot;
-                class:text-center=&quot;centered&quot;
-            &gt;
-                Showing
-
-                &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
-                    &#123;(currentPage - 1) * pageSize + 1&#125;
-                &lt;/span&gt;
-
-                to
-
-                &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
-                    &#123;currentPage * pageSize &gt; totalItems ? totalItems : currentPage * pageSize&#125;
-                &lt;/span&gt;
-
-                of
-
-                &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
-                    &#123;totalItems&#125;
-                &lt;/span&gt;
-
-                results
-            &lt;/div&gt;
-        &lt;div
-                class=&quot;flex flex-col gap-4 sm:flex-row sm:items-center&quot;
-                class:sm:justify-center=&quot;centered&quot;
-                class:sm:justify-between=&quot;!centered&quot;
-            &gt;
-        &lt;!-- Previous --&gt;
-        &lt;a
-                    href=&quot;&#123;previousHref&#125;&quot;
-                    aria-label=&quot;Go to previous page&quot;
-                    class=&quot;group h-11 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
-                    class:hidden=&quot;previousHref === ''&quot;
-                    class:inline-flex=&quot;previousHref !== ''&quot;
-                &gt;
-        &lt;span class=&quot;icon-[lucide--arrow-left] h-4 w-4 transition-transform group-hover:-translate-x-0.5&quot; aria-hidden=&quot;true&quot; &gt;
-        &lt;/span&gt;
-        &lt;span class:hidden=&quot;compact&quot;&gt;
-                        Previous
-                    &lt;/span&gt;
-        &lt;/a&gt;
-        &lt;span
-                    aria-disabled=&quot;true&quot;
-                    class=&quot;h-11 cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-slate-600&quot;
-                    class:hidden=&quot;previousHref !== ''&quot;
-                    class:inline-flex=&quot;previousHref === ''&quot;
-                &gt;
-        &lt;span class=&quot;icon-[lucide--arrow-left] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;
-        &lt;/span&gt;
-        &lt;span class:hidden=&quot;compact&quot;&gt;
-                        Previous
-                    &lt;/span&gt;
-        &lt;/span&gt;
-        &lt;!-- Numbered pages --&gt;
-        &lt;div
-                    class=&quot;flex flex-wrap items-center justify-center gap-1.5&quot;
-                    class:hidden=&quot;!showNumbers&quot;
-                &gt;
-                    &#123;#each pages as page&#125;
-                    &lt;!-- Ellipsis --&gt;
-        &lt;span
-                        class=&quot;grid h-10 w-10 place-items-center text-sm font-semibold text-slate-400&quot;
-                        class:hidden=&quot;!page.ellipsis&quot;
-                    &gt;
-                        …
-                    &lt;/span&gt;
-        &lt;!-- Page link --&gt;
-        &lt;a
-                        href=&quot;&#123;page.href&#125;&quot;
-                        aria-label=&quot;Go to page &#123;page.number&#125;&quot;
-                        class=&quot;h-10 min-w-10 items-center justify-center rounded-xl px-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500&quot;
-                        class:hidden=&quot;page.ellipsis || page.current&quot;
-                        class:inline-flex=&quot;!page.ellipsis &amp;&amp; !page.current&quot;
-                        class:border=&quot;!page.current&quot;
-                        class:border-slate-200=&quot;!page.current&quot;
-                        class:bg-white=&quot;!page.current&quot;
-                        class:text-slate-600=&quot;!page.current&quot;
-                        class:hover:border-indigo-300=&quot;!page.current&quot;
-                        class:hover:bg-indigo-50=&quot;!page.current&quot;
-                        class:hover:text-indigo-700=&quot;!page.current&quot;
-                        class:dark:border-white/10=&quot;!page.current&quot;
-                        class:dark:bg-white/5=&quot;!page.current&quot;
-                        class:dark:text-slate-300=&quot;!page.current&quot;
-                        class:dark:hover:border-indigo-500/30=&quot;!page.current&quot;
-                        class:dark:hover:bg-indigo-500/10=&quot;!page.current&quot;
-                        class:dark:hover:text-indigo-300=&quot;!page.current&quot;
-                    &gt;
-                        &#123;page.number&#125;
-                    &lt;/a&gt;
-        &lt;!-- Current page --&gt;
-        &lt;span
-                        aria-current=&quot;page&quot;
-                        aria-label=&quot;Current page, page &#123;page.number&#125;&quot;
-                        class=&quot;h-10 min-w-10 items-center justify-center rounded-xl bg-indigo-600 px-3 text-sm font-bold text-white shadow-lg shadow-indigo-600/20&quot;
-                        class:hidden=&quot;page.ellipsis || !page.current&quot;
-                        class:inline-flex=&quot;!page.ellipsis &amp;&amp; page.current&quot;
-                    &gt;
-                        &#123;page.number&#125;
-                    &lt;/span&gt;
-                    &#123;/each&#125;
-                &lt;/div&gt;
-        &lt;!-- Mobile page counter --&gt;
-        &lt;div
-                    class=&quot;flex items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400&quot;
-                    class:hidden=&quot;showNumbers&quot;
-                &gt;
-                    Page
-
-                    &lt;span class=&quot;mx-1 font-bold text-slate-950 dark:text-white&quot;&gt;
-                        &#123;currentPage&#125;
-                    &lt;/span&gt;
-
-                    of
-
-                    &lt;span class=&quot;ml-1 font-bold text-slate-950 dark:text-white&quot;&gt;
-                        &#123;totalPages&#125;
-                    &lt;/span&gt;
-        &lt;/div&gt;
-        &lt;!-- Next --&gt;
-        &lt;a
-                    href=&quot;&#123;nextHref&#125;&quot;
-                    aria-label=&quot;Go to next page&quot;
-                    class=&quot;group h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950&quot;
-                    class:hidden=&quot;nextHref === ''&quot;
-                    class:inline-flex=&quot;nextHref !== ''&quot;
-                &gt;
-        &lt;span class:hidden=&quot;compact&quot;&gt;
-                        Next
-                    &lt;/span&gt;
-        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-0.5&quot; aria-hidden=&quot;true&quot; &gt;
-        &lt;/span&gt;
-        &lt;/a&gt;
-        &lt;span
-                    aria-disabled=&quot;true&quot;
-                    class=&quot;h-11 cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-slate-600&quot;
-                    class:hidden=&quot;nextHref !== ''&quot;
-                    class:inline-flex=&quot;nextHref === ''&quot;
-                &gt;
-        &lt;span class:hidden=&quot;compact&quot;&gt;
-                        Next
-                    &lt;/span&gt;
-        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;
-        &lt;/span&gt;
-        &lt;/span&gt;
-        &lt;/div&gt;
+      <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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Pagination&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;Pagination&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>active</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><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/Pagination.wrn</code></p><pre data-language="wrn"><code>component Pagination &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Pagination&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--pagination wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
         &lt;/nav&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/pin-input.wrn b/app/pages/components/pin-input.wrn
index 552dac04..2366f6f4 100644
--- a/app/pages/components/pin-input.wrn
+++ b/app/pages/components/pin-input.wrn
@@ -1,7 +1,7 @@
 page PinInputcomponent {
   seo {
     title = "PinInput component"
-    description = "Reusable pin input component."
+    description = "Secure multi-cell PIN and verification-code input with regex and paste support."
   }
 
   view {
@@ -10,42 +10,130 @@ 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.4</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.3.5</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">forms component</span><h1>PinInput</h1><p>Reusable pin input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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;PinInput
-  label=&quot;Pin&quot;
-  name=&quot;name&quot;
+      <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.5</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;
+  name=&quot;pin&quot;
   value=&quot;value&quot;
-  placeholder=&quot;placeholder&quot;
-  type=&quot;text&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PinInput&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;Pin&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>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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/PinInput.wrn</code></p><pre data-language="wrn"><code>component PinInput &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PinInput&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;Verification code&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;pin&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>length</code></td><td><code>number</code></td><td>Optional</td><td><code>4</code></td></tr><tr><td><code>pattern</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;[0-9]&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>inputMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;numeric&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;one-time-code&quot;</code></td></tr><tr><td><code>masked</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>readonly</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>autoFocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autoSubmit</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>allowPaste</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</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>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear code&quot;</code></td></tr><tr><td><code>separator</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>groupSize</code></td><td><code>number</code></td><td>Optional</td><td><code>0</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>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>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><ul><li><code>input</code></li><li><code>change</code></li><li><code>complete</code></li><li><code>paste</code></li><li><code>clear</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PinInput.wrn</code></p><pre data-language="wrn"><code>component PinInput &#123;
   props &#123;
-    label = &quot;Pin&quot; 
-    name = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Verification code&quot;
+    name = &quot;pin&quot;
     value = &quot;&quot;
-    placeholder = &quot;&quot;
+    length = 4
+    pattern = &quot;[0-9]&quot;
     type = &quot;text&quot;
-    required = false
+    inputMode = &quot;numeric&quot;
+    placeholder = &quot;○&quot;
+    autocomplete = &quot;one-time-code&quot;
+    masked = false
     disabled = false
     readonly = false
-    help = &quot;&quot;
-    error = &quot;&quot;
+    required = false
+    autoFocus = false
+    autoSubmit = false
+    allowPaste = true
+    clearable = true
+    clearLabel = &quot;Clear code&quot;
+    separator = &quot;&quot;
+    groupSize = 0
+    helpText = &quot;&quot;
+    invalid = false
+    validationMessage = &quot;&quot;
     class = &quot;&quot;
+    @event input = function
+    @event change = function
+    @event complete = function
+    @event paste = function
+    @event clear = function
+    @event error = function
   &#125;
+
+  functions &#123;
+    function inputIndexes() &#123;
+      return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].slice(
+        0,
+        Math.max(1, Math.min(12, Number(length)))
+      )
+    &#125;
+  &#125;
+
   view &#123;
-        &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;
+        &lt;fieldset
+      &#123;...attrs&#125;
+      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--pin-input &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
+      data-wrn-pin-input
+      data-length=&quot;&#123;length&#125;&quot;
+      data-pattern=&quot;&#123;pattern&#125;&quot;
+      data-allow-paste=&quot;&#123;allowPaste ? 'true' : 'false'&#125;&quot;
+      data-auto-submit=&quot;&#123;autoSubmit ? 'true' : 'false'&#125;&quot;
+      data-value=&quot;&#123;value&#125;&quot;
+      disabled=&quot;&#123;disabled&#125;&quot;
+      aria-describedby=&quot;&#123;validationMessage ? `$&#123;name&#125;-validation` : helpText ? `$&#123;name&#125;-help` : ''&#125;&quot;
+    &gt;
+        &lt;div class=&quot;wire-next__pin-heading&quot;&gt;
+        &lt;legend&gt;&#123;label&#125;&lt;/legend&gt;
+        &lt;button
+          type=&quot;button&quot;
+          class=&quot;wire-next__pin-clear&quot;
+          data-pin-clear
+          aria-label=&quot;&#123;clearLabel&#125;&quot;
+          title=&quot;&#123;clearLabel&#125;&quot;
+          style=&quot;&#123;clearable &amp;&amp; value ? '' : 'display: none'&#125;&quot;
+        &gt;
+        &lt;span class=&quot;icon-[lucide--rotate-ccw]&quot; aria-hidden=&quot;true&quot;&gt;
         &lt;/span&gt;
-        &lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;
-        &lt;slot /&gt;
-        &lt;/label&gt;
+        &lt;span&gt;&#123;clearLabel&#125;&lt;/span&gt;
+        &lt;/button&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;wire-next__pin-cells&quot; role=&quot;group&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+        &#123;#each inputIndexes() as index&#125;
+          &lt;input
+            data-pin-cell
+            data-pin-index=&quot;&#123;index&#125;&quot;
+            id=&quot;&#123;name&#125;-&#123;index&#125;&quot;
+            type=&quot;&#123;masked ? 'password' : type&#125;&quot;
+            inputmode=&quot;&#123;inputMode&#125;&quot;
+            maxlength=&quot;1&quot;
+            value=&quot;&#123;value[index] || ''&#125;&quot;
+            placeholder=&quot;&#123;placeholder&#125;&quot;
+            autocomplete=&quot;&#123;index === 0 ? autocomplete : 'off'&#125;&quot;
+            aria-label=&quot;&#123;label&#125; digit &#123;index + 1&#125; of &#123;length&#125;&quot;
+            aria-required=&quot;&#123;required ? 'true' : 'false'&#125;&quot;
+            readonly=&quot;&#123;readonly&#125;&quot;
+            disabled=&quot;&#123;disabled&#125;&quot;
+            autofocus=&quot;&#123;autoFocus &amp;&amp; index === 0&#125;&quot;
+          /&gt;
+          &#123;#if separator &amp;&amp; groupSize !== 0 &amp;&amp; (index + 1) % groupSize === 0 &amp;&amp; index + 1 !== length&#125;
+            &lt;span class=&quot;wire-next__pin-separator&quot; aria-hidden=&quot;true&quot;&gt;&#123;separator&#125;&lt;/span&gt;
+          &#123;/if&#125;
+        &#123;/each&#125;
+      &lt;/div&gt;
+        &lt;input
+        type=&quot;hidden&quot;
+        name=&quot;&#123;name&#125;&quot;
+        value=&quot;&#123;value&#125;&quot;
+        required=&quot;&#123;required&#125;&quot;
+        data-pin-value
+      /&gt;
+
+      &#123;#if helpText &amp;&amp; !validationMessage&#125;&lt;small id=&quot;&#123;name&#125;-help&quot;&gt;&#123;helpText&#125;&lt;/small&gt;&#123;/if&#125;
+      &lt;small
+        id=&quot;&#123;name&#125;-validation&quot;
+        class=&quot;wire-next__validation&quot;
+        data-error=&quot;&#123;name&#125;&quot;
+      &gt;&#123;validationMessage&#125;&lt;/small&gt;
+        &lt;/fieldset&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/popover.wrn b/app/pages/components/popover.wrn
index a6db927e..00fcc859 100644
--- a/app/pages/components/popover.wrn
+++ b/app/pages/components/popover.wrn
@@ -1,7 +1,7 @@
 page Popovercomponent {
   seo {
     title = "Popover component"
-    description = "Reusable popover component."
+    description = "Theme-aware, responsive popover component."
   }
 
   view {
@@ -10,37 +10,39 @@ 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.4</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.3.5</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>Reusable popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Popover
-  title=&quot;title&quot;
+      <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.5</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;
   description=&quot;description&quot;
   open=&quot;false&quot;
-  closeLabel=&quot;Close&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Popover&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>title</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>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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/Popover.wrn</code></p><pre data-language="wrn"><code>component Popover &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Popover&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;Popover&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/Popover.wrn</code></p><pre data-language="wrn"><code>component Popover &#123;
   props &#123;
-    title = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Popover&quot;
     description = &quot;&quot;
     open = false
+    placement = &quot;bottom&quot;
     closeLabel = &quot;Close&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;
-        &lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;
+        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--popover wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
         &lt;header&gt;
-        &lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;
-        &lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;
+        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
         &lt;/header&gt;
-        &lt;slot /&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;
-        &lt;/section&gt;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/progress.wrn b/app/pages/components/progress.wrn
index 47e61c13..196aa04a 100644
--- a/app/pages/components/progress.wrn
+++ b/app/pages/components/progress.wrn
@@ -1,7 +1,7 @@
-page progresscomponent {
+page Progresscomponent {
   seo {
-    title = "progress component"
-    description = "Reusable progress component."
+    title = "Progress component"
+    description = "Theme-aware, responsive progress component."
   }
 
   view {
@@ -10,26 +10,36 @@ 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.4</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.3.5</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">core component</span><h1>progress</h1><p>Reusable progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 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
-  value=&quot;0&quot;
+      <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.5</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>value</code></td><td><code>number</code></td><td>Optional</td><td><code>0</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>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>// Progress bar (native &lt;progress&gt;, themed).
-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;
-    value = 0
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Progress&quot;
+    value = 50
     max = 100
+    showValue = true
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;progress class=&quot;wire-progress &#123;class&#125;&quot; value=&quot;&#123;value&#125;&quot; max=&quot;&#123;max&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--progress &#123;class&#125;&quot;&gt;
+        &lt;div class=&quot;wire-next__row&quot;&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;&#123;#if showValue&#125;&lt;strong&gt;&#123;value&#125;%&lt;/strong&gt;&#123;/if&#125;&lt;/div&gt;
+        &lt;progress value=&quot;&#123;value&#125;&quot; max=&quot;&#123;max&#125;&quot;&gt;
         &lt;/progress&gt;
+        &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/radio.wrn b/app/pages/components/radio.wrn
index d97d810d..ad23c1a5 100644
--- a/app/pages/components/radio.wrn
+++ b/app/pages/components/radio.wrn
@@ -1,7 +1,7 @@
 page Radiocomponent {
   seo {
     title = "Radio component"
-    description = "Reusable radio component."
+    description = "Theme-aware, responsive radio component."
   }
 
   view {
@@ -10,38 +10,35 @@ 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.4</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.3.5</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">core component</span><h1>Radio</h1><p>Reusable radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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
-  id=&quot;id&quot;
-  name=&quot;choice&quot;
-  value=&quot;value&quot;
-  label=&quot;Option&quot;
-  description=&quot;description&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>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;choice&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>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Option&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>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></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;
+      <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.5</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;
   props &#123;
-    class = &quot;&quot;
-    id = &quot;&quot;
-    name = &quot;choice&quot;
-    value = &quot;&quot;
-    label = &quot;Option&quot;
-    description = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Radio&quot;
+    name = &quot;&quot;
+    value = &quot;on&quot;
     checked = false
     disabled = false
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800 &#123;class&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;radio&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500&quot; /&gt;
-        &lt;span&gt;
-        &lt;span class=&quot;block text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;description&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/span&gt;
-        &lt;/span&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--choice wire-next--radio &#123;class&#125;&quot;&gt;
+        &lt;input &#123;...attrs&#125; type=&quot;radio&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; /&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
         &lt;/label&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/range-slider.wrn b/app/pages/components/range-slider.wrn
index 76d39f0a..0536cd33 100644
--- a/app/pages/components/range-slider.wrn
+++ b/app/pages/components/range-slider.wrn
@@ -1,7 +1,7 @@
 page RangeSlidercomponent {
   seo {
     title = "RangeSlider component"
-    description = "Reusable range slider component."
+    description = "Theme-aware, responsive range slider component."
   }
 
   view {
@@ -10,32 +10,40 @@ 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.4</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.3.5</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">content component</span><h1>RangeSlider</h1><p>Reusable range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;RangeSlider
-  eyebrow=&quot;eyebrow&quot;
-  title=&quot;title&quot;
-  description=&quot;description&quot;
-  href=&quot;href&quot;
-  actionLabel=&quot;Learn more&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RangeSlider&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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</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/RangeSlider.wrn</code></p><pre data-language="wrn"><code>component RangeSlider &#123;
+      <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.5</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;
+  name=&quot;name&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RangeSlider&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;Range Slider&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;range&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/RangeSlider.wrn</code></p><pre data-language="wrn"><code>component RangeSlider &#123;
   props &#123;
-    eyebrow = &quot;&quot;
-    title = &quot;&quot;
-    description = &quot;&quot;
-    href = &quot;&quot;
-    actionLabel = &quot;Learn more&quot;
-    image = &quot;&quot;
-    alt = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Range Slider&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;range&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = &quot;&quot;
+    disabled = false
+    required = false
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&#123;#if image&#125;&lt;img src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&#123;/if&#125;&#123;#if eyebrow&#125;&lt;span class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&#123;/if&#125;&#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;&#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;&lt;slot /&gt;&#123;#if href&#125;&lt;a href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&#123;/if&#125;&lt;/article&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--range-slider &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/rating.wrn b/app/pages/components/rating.wrn
new file mode 100644
index 00000000..df81f02e
--- /dev/null
+++ b/app/pages/components/rating.wrn
@@ -0,0 +1,46 @@
+page Ratingcomponent {
+  seo {
+    title = "Rating component"
+    description = "Theme-aware, responsive rating component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Rating&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;Rating&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/Rating.wrn</code></p><pre data-language="wrn"><code>component Rating &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Rating&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--rating wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/scrollspy.wrn b/app/pages/components/scrollspy.wrn
new file mode 100644
index 00000000..d0418a25
--- /dev/null
+++ b/app/pages/components/scrollspy.wrn
@@ -0,0 +1,44 @@
+page Scrollspycomponent {
+  seo {
+    title = "Scrollspy component"
+    description = "Theme-aware, responsive scrollspy component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Scrollspy&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;Scrollspy&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>active</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><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/Scrollspy.wrn</code></p><pre data-language="wrn"><code>component Scrollspy &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Scrollspy&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--scrollspy wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.5</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>
+  }
+}
diff --git a/app/pages/components/search-box.wrn b/app/pages/components/search-box.wrn
new file mode 100644
index 00000000..6fdead4c
--- /dev/null
+++ b/app/pages/components/search-box.wrn
@@ -0,0 +1,50 @@
+page SearchBoxcomponent {
+  seo {
+    title = "SearchBox component"
+    description = "Theme-aware, responsive search box component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  name=&quot;name&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchBox&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;Search Box&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;search&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/SearchBox.wrn</code></p><pre data-language="wrn"><code>component SearchBox &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Search Box&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;search&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--search-box &#123;class&#125;&quot;&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;
+    &#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.5</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>
+  }
+}
diff --git a/app/pages/components/select.wrn b/app/pages/components/select.wrn
index 1a353e75..cef3ec9e 100644
--- a/app/pages/components/select.wrn
+++ b/app/pages/components/select.wrn
@@ -1,7 +1,7 @@
 page Selectcomponent {
   seo {
     title = "Select component"
-    description = "Reusable select component."
+    description = "Theme-aware, responsive select component."
   }
 
   view {
@@ -10,40 +10,38 @@ 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.4</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.3.5</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">core component</span><h1>Select</h1><p>Reusable select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Select
-  id=&quot;id&quot;
-  name=&quot;name&quot;
+      <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.5</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;
-  help=&quot;help&quot;
-  error=&quot;error&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>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;&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>help</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>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></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/Select.wrn</code></p><pre data-language="wrn"><code>component Select &#123;
+  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;
   props &#123;
-    class = &quot;&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
     label = &quot;Select&quot;
-    help = &quot;&quot;
-    error = &quot;&quot;
-    required = false
+    name = &quot;&quot;
+    value = &quot;&quot;
+    options = []
+    placeholder = &quot;Select an option&quot;
+    multiple = false
     disabled = false
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
-        &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--select &#123;class&#125;&quot;&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
+        &lt;select &#123;...attrs&#125; name=&quot;&#123;name&#125;&quot; multiple=&quot;&#123;multiple&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot;&gt;
+        &lt;option value=&quot;&quot;&gt;&#123;placeholder&#125;&lt;/option&gt;&#123;#each options as option&#125;&lt;option value=&quot;&#123;option.value&#125;&quot; selected=&quot;&#123;option.value === value&#125;&quot;&gt;&#123;option.label&#125;&lt;/option&gt;&#123;/each&#125;&lt;/select&gt;
         &lt;/label&gt;
-        &lt;select id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/select&gt;
-        &lt;p data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/p&gt;
-        &lt;p data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600&quot;&gt;&#123;error&#125;&lt;/p&gt;
-        &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/sidebar.wrn b/app/pages/components/sidebar.wrn
new file mode 100644
index 00000000..735c3e29
--- /dev/null
+++ b/app/pages/components/sidebar.wrn
@@ -0,0 +1,44 @@
+page Sidebarcomponent {
+  seo {
+    title = "Sidebar component"
+    description = "Theme-aware, responsive sidebar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Sidebar&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;Sidebar&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>active</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><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/Sidebar.wrn</code></p><pre data-language="wrn"><code>component Sidebar &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Sidebar&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--sidebar wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.5</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>
+  }
+}
diff --git a/app/pages/components/skeleton.wrn b/app/pages/components/skeleton.wrn
index 72e52c05..f534c9f3 100644
--- a/app/pages/components/skeleton.wrn
+++ b/app/pages/components/skeleton.wrn
@@ -1,7 +1,7 @@
 page Skeletoncomponent {
   seo {
     title = "Skeleton component"
-    description = "Reusable skeleton component."
+    description = "Theme-aware, responsive skeleton component."
   }
 
   view {
@@ -10,25 +10,32 @@ 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.4</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.3.5</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">feedback component</span><h1>Skeleton</h1><p>Reusable skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 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
-  height=&quot;4&quot;
-  rounded=&quot;lg&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>height</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>rounded</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;lg&quot;</code></td></tr><tr><td><code>className</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;
+      <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.5</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;
   props &#123;
-    height = &quot;4&quot;
-    rounded = &quot;lg&quot;
-    className = &quot;&quot;
+    color = &quot;primary&quot;
+    label = &quot;Loading&quot;
+    size = &quot;md&quot;
+    lines = 3
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div aria-hidden=&quot;true&quot; class=&quot;animate-pulse bg-slate-200 dark:bg-slate-800 h-&#123;height&#125; rounded-&#123;rounded&#125; &#123;className&#125;&quot;&gt;
-        &lt;/div&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--skeleton wire-next--size-&#123;size&#125; &#123;class&#125;&quot; role=&quot;status&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#if &quot;Skeleton&quot; === &quot;Skeleton&quot;&#125;&#123;#each Array(lines).fill(0) as line&#125;&lt;span&gt;
+        &lt;/span&gt;&#123;/each&#125;&#123;:else&#125;&lt;i aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/spinner.wrn b/app/pages/components/spinner.wrn
index 55f5ac9b..993b99b0 100644
--- a/app/pages/components/spinner.wrn
+++ b/app/pages/components/spinner.wrn
@@ -1,7 +1,7 @@
 page Spinnercomponent {
   seo {
     title = "Spinner component"
-    description = "Reusable spinner component."
+    description = "Theme-aware, responsive spinner component."
   }
 
   view {
@@ -10,25 +10,32 @@ 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.4</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.3.5</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">core component</span><h1>Spinner</h1><p>Reusable spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 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.3.5</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;
-/&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&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></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;
+  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;
   props &#123;
-    class = &quot;&quot;
+    color = &quot;primary&quot;
     label = &quot;Loading&quot;
     size = &quot;md&quot;
+    lines = 3
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;span role=&quot;status&quot; aria-label=&quot;&#123;label&#125;&quot; class=&quot;inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 &#123;size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'&#125; &#123;class&#125;&quot;&gt;
-        &lt;/span&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--spinner wire-next--size-&#123;size&#125; &#123;class&#125;&quot; role=&quot;status&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#if &quot;Spinner&quot; === &quot;Skeleton&quot;&#125;&#123;#each Array(lines).fill(0) as line&#125;&lt;span&gt;
+        &lt;/span&gt;&#123;/each&#125;&#123;:else&#125;&lt;i aria-hidden=&quot;true&quot;&gt;
+        &lt;/i&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/stepper.wrn b/app/pages/components/stepper.wrn
index 21044876..e9e4666b 100644
--- a/app/pages/components/stepper.wrn
+++ b/app/pages/components/stepper.wrn
@@ -1,7 +1,7 @@
 page Steppercomponent {
   seo {
     title = "Stepper component"
-    description = "Reusable stepper component."
+    description = "Theme-aware, responsive stepper component."
   }
 
   view {
@@ -10,32 +10,34 @@ 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.4</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.3.5</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">content component</span><h1>Stepper</h1><p>Reusable stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Stepper
-  eyebrow=&quot;eyebrow&quot;
-  title=&quot;title&quot;
-  description=&quot;description&quot;
-  href=&quot;href&quot;
-  actionLabel=&quot;Learn more&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Stepper&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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</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/Stepper.wrn</code></p><pre data-language="wrn"><code>component Stepper &#123;
+      <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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Stepper&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;Stepper&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>active</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><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/Stepper.wrn</code></p><pre data-language="wrn"><code>component Stepper &#123;
   props &#123;
-    eyebrow = &quot;&quot;
-    title = &quot;&quot;
-    description = &quot;&quot;
-    href = &quot;&quot;
-    actionLabel = &quot;Learn more&quot;
-    image = &quot;&quot;
-    alt = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Stepper&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&#123;#if image&#125;&lt;img src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&#123;/if&#125;&#123;#if eyebrow&#125;&lt;span class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&#123;/if&#125;&#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;&#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;&lt;slot /&gt;&#123;#if href&#125;&lt;a href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&#123;/if&#125;&lt;/article&gt;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--stepper wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/strong-password.wrn b/app/pages/components/strong-password.wrn
new file mode 100644
index 00000000..3053b3ef
--- /dev/null
+++ b/app/pages/components/strong-password.wrn
@@ -0,0 +1,264 @@
+page StrongPasswordcomponent {
+  seo {
+    title = "StrongPassword component"
+    description = "Theme-aware, responsive strong password component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  name=&quot;password&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StrongPassword&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;Password&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;password&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;Create a strong password&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;new-password&quot;</code></td></tr><tr><td><code>minLength</code></td><td><code>number</code></td><td>Optional</td><td><code>8</code></td></tr><tr><td><code>specialCharactersSet</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;!@#$%^&amp;*()_+-=[]&#123;&#125;|;:,.&lt;&gt;?&quot;</code></td></tr><tr><td><code>requireLowercase</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>requireUppercase</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>requireNumber</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>requireSpecialCharacter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showRequirements</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>presentation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;inline&quot;</code></td></tr><tr><td><code>hintText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Use a unique password you do not use elsewhere.&quot;</code></td></tr><tr><td><code>emptyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Enter a password&quot;</code></td></tr><tr><td><code>weakLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Weak&quot;</code></td></tr><tr><td><code>fairLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Fair&quot;</code></td></tr><tr><td><code>goodLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Good&quot;</code></td></tr><tr><td><code>strongLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Strong&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>readonly</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>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><ul><li><code>input</code></li><li><code>change</code></li><li><code>strength</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StrongPassword.wrn</code></p><pre data-language="wrn"><code>component StrongPassword &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Password&quot;
+    name = &quot;password&quot;
+    value = &quot;&quot;
+    placeholder = &quot;Create a strong password&quot;
+    autocomplete = &quot;new-password&quot;
+    minLength = 8
+    specialCharactersSet = &quot;!@#$%^&amp;*()_+-=[]&#123;&#125;|;:,.&lt;&gt;?&quot;
+    requireLowercase = true
+    requireUppercase = true
+    requireNumber = true
+    requireSpecialCharacter = true
+    showRequirements = true
+    presentation = &quot;inline&quot;
+    hintText = &quot;Use a unique password you do not use elsewhere.&quot;
+    emptyLabel = &quot;Enter a password&quot;
+    weakLabel = &quot;Weak&quot;
+    fairLabel = &quot;Fair&quot;
+    goodLabel = &quot;Good&quot;
+    strongLabel = &quot;Strong&quot;
+    disabled = false
+    readonly = false
+    required = false
+    invalid = false
+    validationMessage = &quot;&quot;
+    class = &quot;&quot;
+    @event input = function
+    @event change = function
+    @event strength = function
+  &#125;
+
+  state password = value
+  state detailsOpen = false
+
+  functions &#123;
+    function hasMinimumLength() &#123;
+      return password.length &gt;= Number(minLength)
+    &#125;
+
+    function hasLowercase() &#123;
+      return password !== password.toUpperCase()
+    &#125;
+
+    function hasUppercase() &#123;
+      return password !== password.toLowerCase()
+    &#125;
+
+    function hasNumber() &#123;
+      return containsCharacterAt(&quot;0123456789&quot;, 0)
+    &#125;
+
+    function hasSpecialCharacter() &#123;
+      return containsCharacterAt(specialCharactersSet, 0)
+    &#125;
+
+    function containsCharacterAt(characters, index) &#123;
+      if (index &gt;= characters.length) &#123;
+        return false
+      &#125;
+      if (password.includes(characters[index])) &#123;
+        return true
+      &#125;
+      return containsCharacterAt(characters, index + 1)
+    &#125;
+
+    function score() &#123;
+      return (hasMinimumLength() ? 1 : 0) + (requireLowercase &amp;&amp; hasLowercase() ? 1 : 0) + (requireUppercase &amp;&amp; hasUppercase() ? 1 : 0) + (requireNumber &amp;&amp; hasNumber() ? 1 : 0) + (requireSpecialCharacter &amp;&amp; hasSpecialCharacter() ? 1 : 0)
+    &#125;
+
+    function maximumScore() &#123;
+      return 1 + (requireLowercase ? 1 : 0) + (requireUppercase ? 1 : 0) + (requireNumber ? 1 : 0) + (requireSpecialCharacter ? 1 : 0)
+    &#125;
+
+    function strengthPercent() &#123;
+      return Math.round(score() / maximumScore() * 100)
+    &#125;
+
+    function strengthLevel() &#123;
+      if (!password) &#123;
+        return &quot;empty&quot;
+      &#125;
+      if (strengthPercent() &lt;= 25) &#123;
+        return &quot;weak&quot;
+      &#125;
+      if (strengthPercent() &lt;= 50) &#123;
+        return &quot;fair&quot;
+      &#125;
+      if (strengthPercent() &lt; 100) &#123;
+        return &quot;good&quot;
+      &#125;
+      return &quot;strong&quot;
+    &#125;
+
+    function strengthLabel() &#123;
+      if (strengthLevel() === &quot;weak&quot;) &#123;
+        return weakLabel
+      &#125;
+      if (strengthLevel() === &quot;fair&quot;) &#123;
+        return fairLabel
+      &#125;
+      if (strengthLevel() === &quot;good&quot;) &#123;
+        return goodLabel
+      &#125;
+      if (strengthLevel() === &quot;strong&quot;) &#123;
+        return strongLabel
+      &#125;
+      return emptyLabel
+    &#125;
+
+  &#125;
+
+  view &#123;
+        &lt;div
+      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--strong-password wire-next--strong-password-&#123;presentation&#125; &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
+      data-wrn-strong-password
+      data-strength=&quot;&#123;password ? strengthLevel() : 'empty'&#125;&quot;
+      data-score=&quot;&#123;password ? score() : 0&#125;&quot;
+    &gt;
+        &lt;label for=&quot;&#123;name&#125;-strong-password&quot;&gt;&#123;label&#125;&lt;/label&gt;
+        &lt;div class=&quot;wire-next__strong-password-anchor&quot;&gt;
+        &lt;input
+          &#123;...attrs&#125;
+          id=&quot;&#123;name&#125;-strong-password&quot;
+          type=&quot;password&quot;
+          name=&quot;&#123;name&#125;&quot;
+          value=&quot;&#123;password&#125;&quot;
+          placeholder=&quot;&#123;placeholder&#125;&quot;
+          autocomplete=&quot;&#123;autocomplete&#125;&quot;
+          minlength=&quot;&#123;minLength&#125;&quot;
+          disabled=&quot;&#123;disabled&#125;&quot;
+          readonly=&quot;&#123;readonly&#125;&quot;
+          required=&quot;&#123;required&#125;&quot;
+          aria-invalid=&quot;&#123;invalid ? 'true' : 'false'&#125;&quot;
+          aria-describedby=&quot;&#123;validationMessage ? name + '-validation' : hintText ? name + '-hint' : ''&#125;&quot;
+          @focus=&quot;detailsOpen = true&quot;
+          @blur=&quot;detailsOpen = false&quot;
+          @input=&quot;password = event.target.value; $emit('input', &#123; value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() &#125;); $emit('strength', &#123; value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() &#125;)&quot;
+          @change=&quot;$emit('change', &#123; value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() &#125;)&quot;
+        /&gt;
+
+        &#123;#if presentation === &quot;popover&quot;&#125;
+          &lt;div
+            class=&quot;wire-next__strong-password-popover&quot;
+            data-open=&quot;&#123;detailsOpen ? 'true' : 'false'&#125;&quot;
+            role=&quot;status&quot;
+          &gt;
+        &lt;div class=&quot;wire-next__strong-password-popover-arrow&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;wire-next__strong-password-details&quot;&gt;
+        &lt;div class=&quot;wire-next__strong-password-summary&quot;&gt;
+        &lt;span&gt;Password strength&lt;/span&gt;
+        &lt;strong&gt;&#123;password ? strengthLabel() : emptyLabel&#125;&lt;/strong&gt;
+        &lt;/div&gt;
+        &lt;div
+                class=&quot;wire-next__strong-password-meter&quot;
+                role=&quot;progressbar&quot;
+                aria-label=&quot;Password strength&quot;
+                aria-valuemin=&quot;0&quot;
+                aria-valuemax=&quot;100&quot;
+                aria-valuenow=&quot;&#123;password ? strengthPercent() : 0&#125;&quot;
+              &gt;
+        &lt;span style=&quot;width: &#123;password ? strengthPercent() : 0&#125;%&quot;&gt;
+        &lt;/span&gt;
+        &lt;/div&gt;
+              &#123;#if showRequirements&#125;
+                &lt;ul class=&quot;wire-next__strong-password-requirements&quot;&gt;
+        &lt;li data-met=&quot;&#123;password &amp;&amp; hasMinimumLength() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;At least &#123;minLength&#125; characters
+                  &lt;/li&gt;
+                  &#123;#if requireLowercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasLowercase() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One lowercase letter&lt;/li&gt;&#123;/if&#125;
+                  &#123;#if requireUppercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasUppercase() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One uppercase letter&lt;/li&gt;&#123;/if&#125;
+                  &#123;#if requireNumber&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasNumber() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One number&lt;/li&gt;&#123;/if&#125;
+                  &#123;#if requireSpecialCharacter&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasSpecialCharacter() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One special character: &#123;specialCharactersSet&#125;&lt;/li&gt;&#123;/if&#125;
+                &lt;/ul&gt;
+              &#123;/if&#125;
+              &#123;#if hintText&#125;&lt;small id=&quot;&#123;name&#125;-hint&quot;&gt;&#123;hintText&#125;&lt;/small&gt;&#123;/if&#125;
+            &lt;/div&gt;
+        &lt;/div&gt;
+        &#123;/if&#125;
+      &lt;/div&gt;
+
+      &#123;#if presentation !== &quot;popover&quot;&#125;
+        &lt;div class=&quot;wire-next__strong-password-details&quot;&gt;
+        &lt;div class=&quot;wire-next__strong-password-summary&quot;&gt;
+        &lt;span&gt;Password strength&lt;/span&gt;
+        &lt;strong&gt;&#123;password ? strengthLabel() : emptyLabel&#125;&lt;/strong&gt;
+        &lt;/div&gt;
+        &lt;div
+            class=&quot;wire-next__strong-password-meter&quot;
+            role=&quot;progressbar&quot;
+            aria-label=&quot;Password strength&quot;
+            aria-valuemin=&quot;0&quot;
+            aria-valuemax=&quot;100&quot;
+            aria-valuenow=&quot;&#123;password ? strengthPercent() : 0&#125;&quot;
+          &gt;
+        &lt;span style=&quot;width: &#123;password ? strengthPercent() : 0&#125;%&quot;&gt;
+        &lt;/span&gt;
+        &lt;/div&gt;
+          &#123;#if showRequirements&#125;
+            &lt;ul class=&quot;wire-next__strong-password-requirements&quot;&gt;
+        &lt;li data-met=&quot;&#123;password &amp;&amp; hasMinimumLength() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;At least &#123;minLength&#125; characters&lt;/li&gt;
+              &#123;#if requireLowercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasLowercase() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One lowercase letter&lt;/li&gt;&#123;/if&#125;
+              &#123;#if requireUppercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasUppercase() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One uppercase letter&lt;/li&gt;&#123;/if&#125;
+              &#123;#if requireNumber&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasNumber() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One number&lt;/li&gt;&#123;/if&#125;
+              &#123;#if requireSpecialCharacter&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasSpecialCharacter() ? 'true' : 'false'&#125;&quot;&gt;
+        &lt;span aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;One special character: &#123;specialCharactersSet&#125;&lt;/li&gt;&#123;/if&#125;
+            &lt;/ul&gt;
+          &#123;/if&#125;
+          &#123;#if hintText&#125;&lt;small id=&quot;&#123;name&#125;-hint&quot;&gt;&#123;hintText&#125;&lt;/small&gt;&#123;/if&#125;
+        &lt;/div&gt;
+      &#123;/if&#125;
+
+      &lt;small id=&quot;&#123;name&#125;-validation&quot; class=&quot;wire-next__validation&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;validationMessage&#125;&lt;/small&gt;
+        &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.5</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>
+  }
+}
diff --git a/app/pages/components/styled-icon.wrn b/app/pages/components/styled-icon.wrn
new file mode 100644
index 00000000..5efc8d5c
--- /dev/null
+++ b/app/pages/components/styled-icon.wrn
@@ -0,0 +1,46 @@
+page StyledIconcomponent {
+  seo {
+    title = "StyledIcon component"
+    description = "Theme-aware, responsive styled icon component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StyledIcon&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;Styled Icon&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/StyledIcon.wrn</code></p><pre data-language="wrn"><code>component StyledIcon &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Styled Icon&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--styled-icon wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/switch.wrn b/app/pages/components/switch.wrn
index 57a9a853..3afc2e45 100644
--- a/app/pages/components/switch.wrn
+++ b/app/pages/components/switch.wrn
@@ -1,7 +1,7 @@
 page Switchcomponent {
   seo {
     title = "Switch component"
-    description = "Reusable switch component."
+    description = "Theme-aware, responsive switch component."
   }
 
   view {
@@ -10,42 +10,35 @@ 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.4</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.3.5</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">core component</span><h1>Switch</h1><p>Reusable switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>7 props</span><span>0 slots</span><span>1 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
-  id=&quot;id&quot;
-  name=&quot;name&quot;
+      <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.5</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;
-  description=&quot;description&quot;
-  checked=&quot;false&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>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;&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>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&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></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><ul><li><code>click</code></li></ul></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;
+  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;
   props &#123;
-    class = &quot;&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
     label = &quot;Switch&quot;
-    description = &quot;&quot;
+    name = &quot;&quot;
+    value = &quot;on&quot;
     checked = false
     disabled = false
+    class = &quot;&quot;
   &#125;
-  state on = checked
   view &#123;
-        &lt;button id=&quot;&#123;id&#125;&quot; type=&quot;button&quot; role=&quot;switch&quot; aria-checked=&quot;&#123;on&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; @click=&quot;on = !on&quot; class=&quot;flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 &#123;class&#125;&quot;&gt;
-        &lt;span&gt;
-        &lt;span class=&quot;block text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;span data-show=&quot;description&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/span&gt;
-        &lt;/span&gt;
-        &lt;span class=&quot;relative inline-flex h-6 w-11 shrink-0 rounded-full transition &#123;on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'&#125;&quot;&gt;
-        &lt;span class=&quot;absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform &#123;on ? 'translate-x-5' : 'translate-x-0.5'&#125;&quot;&gt;
-        &lt;/span&gt;
-        &lt;/span&gt;
-        &lt;input type=&quot;hidden&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;on ? 'true' : 'false'&#125;&quot; /&gt;
-        &lt;/button&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--choice wire-next--switch &#123;class&#125;&quot;&gt;
+        &lt;input &#123;...attrs&#125; type=&quot;checkbox&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; /&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
+        &lt;/label&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/table.wrn b/app/pages/components/table.wrn
index 1307956a..d0986c5a 100644
--- a/app/pages/components/table.wrn
+++ b/app/pages/components/table.wrn
@@ -1,7 +1,7 @@
 page Tablecomponent {
   seo {
     title = "Table component"
-    description = "Reusable table component."
+    description = "Theme-aware, responsive table component."
   }
 
   view {
@@ -10,41 +10,40 @@ 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.4</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.3.5</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">data component</span><h1>Table</h1><p>Reusable table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Table
-  caption=&quot;Data table&quot;
-  responsive=&quot;true&quot;
-  striped=&quot;false&quot;
-  hoverable=&quot;true&quot;
-  compact=&quot;false&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Data table&quot;</code></td></tr><tr><td><code>responsive</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>hoverable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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;
+      <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.5</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;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    caption = &quot;Table&quot;
+    columns = []
+    rows = []
+    striped = true
     class = &quot;&quot;
-    caption = &quot;Data table&quot;
-    responsive = true
-    striped = false
-    hoverable = true
-    compact = false
   &#125;
-
   view &#123;
-        &lt;div class=&quot;wire-table-wrap rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] &#123;class&#125;&quot;&gt;
-        &lt;table
-        class=&quot;wire-table min-w-[640px]&quot;
-        class:wire-table--striped='&#123;striped&#125;'
-        class:wire-table--compact='&#123;compact&#125;'
-        class:wire-table--hoverable='&#123;hoverable&#125;'
-      &gt;
-        &lt;caption class=&quot;wire-visually-hidden&quot;&gt;&#123;caption&#125;&lt;/caption&gt;
-        &lt;slot /&gt;
+        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--table &#123;class&#125;&quot;&gt;
+        &lt;table&gt;
+        &lt;caption&gt;&#123;caption&#125;&lt;/caption&gt;
+        &lt;thead&gt;
+        &lt;tr&gt;&#123;#each columns as column&#125;&lt;th&gt;&#123;column.label&#125;&lt;/th&gt;&#123;/each&#125;&lt;/tr&gt;
+        &lt;/thead&gt;
+        &lt;tbody&gt;&#123;#each rows as row&#125;&lt;tr&gt;&#123;#each columns as column&#125;&lt;td&gt;&#123;row[column.key]&#125;&lt;/td&gt;&#123;/each&#125;&lt;/tr&gt;&#123;/each&#125;&lt;/tbody&gt;
         &lt;/table&gt;
+        &lt;slot /&gt;
         &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/tabs.wrn b/app/pages/components/tabs.wrn
index 762eddd4..dc7f520c 100644
--- a/app/pages/components/tabs.wrn
+++ b/app/pages/components/tabs.wrn
@@ -1,7 +1,7 @@
 page Tabscomponent {
   seo {
     title = "Tabs component"
-    description = "Reusable tabs component."
+    description = "Theme-aware, responsive tabs component."
   }
 
   view {
@@ -10,34 +10,34 @@ 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.4</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.3.5</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">content component</span><h1>Tabs</h1><p>Reusable tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>2 props</span><span>2 slots</span><span>1 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
-  active=&quot;first&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Tabs&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;first&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>first</code></li><li><code>second</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Tabs.wrn</code></p><pre data-language="wrn"><code>component Tabs &#123;
+      <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.5</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;
+  items=&quot;[]&quot;
+  active=&quot;active&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Tabs&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;Tabs&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>active</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><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/Tabs.wrn</code></p><pre data-language="wrn"><code>component Tabs &#123;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Tabs&quot;
+    items = []
+    active = &quot;&quot;
+    orientation = &quot;horizontal&quot;
     class = &quot;&quot;
-    active = &quot;first&quot;
   &#125;
-  state current = active
   view &#123;
-        &lt;div class=&quot;&#123;class&#125;&quot;&gt;
-        &lt;div role=&quot;tablist&quot; class=&quot;flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800&quot;&gt;
-        &lt;button role=&quot;tab&quot; aria-selected=&quot;&#123;current === 'first'&#125;&quot; @click=&quot;current = 'first'&quot; class=&quot;min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition &#123;current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'&#125;&quot;&gt;First&lt;/button&gt;
-        &lt;button role=&quot;tab&quot; aria-selected=&quot;&#123;current === 'second'&#125;&quot; @click=&quot;current = 'second'&quot; class=&quot;min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition &#123;current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'&#125;&quot;&gt;Second&lt;/button&gt;
-        &lt;/div&gt;
-        &lt;div data-show=&quot;current === 'first'&quot; role=&quot;tabpanel&quot; class=&quot;pt-5&quot;&gt;
-        &lt;slot name=&quot;first&quot; /&gt;
-        &lt;/div&gt;
-        &lt;div data-show=&quot;current === 'second'&quot; role=&quot;tabpanel&quot; class=&quot;pt-5&quot;&gt;
-        &lt;slot name=&quot;second&quot; /&gt;
-        &lt;/div&gt;
-        &lt;/div&gt;
+        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--tabs wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
+      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
+      &lt;slot /&gt;
+        &lt;/nav&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/textarea.wrn b/app/pages/components/textarea.wrn
index e4faef73..af5e9195 100644
--- a/app/pages/components/textarea.wrn
+++ b/app/pages/components/textarea.wrn
@@ -1,7 +1,7 @@
 page Textareacomponent {
   seo {
     title = "Textarea component"
-    description = "Reusable textarea component."
+    description = "Theme-aware, responsive textarea component."
   }
 
   view {
@@ -10,41 +10,37 @@ 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.4</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.3.5</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">core component</span><h1>Textarea</h1><p>Reusable textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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
-  id=&quot;id&quot;
+      <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.5</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;
-  label=&quot;Message&quot;
   value=&quot;value&quot;
-  placeholder=&quot;placeholder&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>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;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Message&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>help</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>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></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;
-    class = &quot;&quot;
-    id = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Textarea&quot;
     name = &quot;&quot;
-    label = &quot;Message&quot;
     value = &quot;&quot;
     placeholder = &quot;&quot;
     rows = 5
-    help = &quot;&quot;
-    error = &quot;&quot;
-    required = false
     disabled = false
+    required = false
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
-        &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--textarea &#123;class&#125;&quot;&gt;
+        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
+        &lt;textarea &#123;...attrs&#125; name=&quot;&#123;name&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; rows=&quot;&#123;rows&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot;&gt;&#123;value&#125;&lt;/textarea&gt;
         &lt;/label&gt;
-        &lt;textarea id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; rows=&quot;&#123;rows&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; class=&quot;w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'&#125;&quot;&gt;&#123;value&#125;&lt;/textarea&gt;
-        &lt;p data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/p&gt;
-        &lt;p data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600&quot;&gt;&#123;error&#125;&lt;/p&gt;
-        &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/time-picker.wrn b/app/pages/components/time-picker.wrn
index eb8aa4e5..c3700c28 100644
--- a/app/pages/components/time-picker.wrn
+++ b/app/pages/components/time-picker.wrn
@@ -1,7 +1,7 @@
 page TimePickercomponent {
   seo {
     title = "TimePicker component"
-    description = "Reusable time picker component."
+    description = "Theme-aware, responsive time picker component."
   }
 
   view {
@@ -10,37 +10,40 @@ 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.4</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.3.5</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>Reusable time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;TimePicker
-  id=&quot;time-picker&quot;
-  name=&quot;time&quot;
-  label=&quot;Time&quot;
+      <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.5</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;
+  name=&quot;name&quot;
   value=&quot;value&quot;
-  min=&quot;min&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimePicker&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>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;time-picker&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;time&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Time&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>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>60</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>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/TimePicker.wrn</code></p><pre data-language="wrn"><code>component TimePicker &#123;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimePicker&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;Time Picker&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;time&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/TimePicker.wrn</code></p><pre data-language="wrn"><code>component TimePicker &#123;
   props &#123;
-    id = &quot;time-picker&quot;
-    name = &quot;time&quot;
-    label = &quot;Time&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Time Picker&quot;
+    name = &quot;&quot;
     value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;time&quot;
     min = &quot;&quot;
     max = &quot;&quot;
-    step = 60
-    required = false
+    step = &quot;&quot;
     disabled = false
+    required = false
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;wire-field &#123;class&#125;&quot;&gt;
-        &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/label&gt;
-        &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;time&quot; value=&quot;&#123;value&#125;&quot; min=&quot;&#123;min&#125;&quot; max=&quot;&#123;max&#125;&quot; step=&quot;&#123;step&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-input&quot; /&gt;
-        &lt;/div&gt;
+        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--time-picker &#123;class&#125;&quot;&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;
     &#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.4</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.3.5</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>
   }
diff --git a/app/pages/components/timeline.wrn b/app/pages/components/timeline.wrn
index bdef7b4b..f52ea0ce 100644
--- a/app/pages/components/timeline.wrn
+++ b/app/pages/components/timeline.wrn
@@ -1,7 +1,7 @@
 page Timelinecomponent {
   seo {
     title = "Timeline component"
-    description = "Reusable timeline component."
+    description = "Theme-aware, responsive timeline component."
   }
 
   view {
@@ -10,27 +10,36 @@ 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.4</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.3.5</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">visualization component</span><h1>Timeline</h1><p>Reusable timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>2 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.3.5</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;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Timeline&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>class</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;Timeline&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/Timeline.wrn</code></p><pre data-language="wrn"><code>component Timeline &#123;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Timeline&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;Timeline&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/Timeline.wrn</code></p><pre data-language="wrn"><code>component Timeline &#123;
   props &#123;
-    class = &quot;&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
     title = &quot;Timeline&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;section class=&quot;&#123;class&#125;&quot;&gt;
-        &lt;h2 class=&quot;text-lg font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;
-        &lt;ol class=&quot;mt-5 border-l border-slate-200 pl-6 dark:border-slate-800&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/ol&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--timeline wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
         &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/toast-notifications.wrn b/app/pages/components/toast-notifications.wrn
new file mode 100644
index 00000000..2bf0cb46
--- /dev/null
+++ b/app/pages/components/toast-notifications.wrn
@@ -0,0 +1,46 @@
+page ToastNotificationscomponent {
+  seo {
+    title = "ToastNotifications component"
+    description = "Theme-aware, responsive toast notifications component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToastNotifications&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;Toast Notifications&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/ToastNotifications.wrn</code></p><pre data-language="wrn"><code>component ToastNotifications &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Toast Notifications&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toast-notifications wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/toast.wrn b/app/pages/components/toast.wrn
index cb68e7d7..fe6caaa4 100644
--- a/app/pages/components/toast.wrn
+++ b/app/pages/components/toast.wrn
@@ -1,7 +1,7 @@
 page Toastcomponent {
   seo {
     title = "Toast component"
-    description = "Reusable toast component."
+    description = "Theme-aware, responsive toast component."
   }
 
   view {
@@ -10,36 +10,36 @@ 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.4</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.3.5</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">core component</span><h1>Toast</h1><p>Reusable toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>5 props</span><span>0 slots</span><span>1 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
-  title=&quot;Saved&quot;
+      <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.5</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;
   description=&quot;description&quot;
-  variant=&quot;success&quot;
-  duration=&quot;5000&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Toast&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>class</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;Saved&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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;success&quot;</code></td></tr><tr><td><code>duration</code></td><td><code>number</code></td><td>Optional</td><td><code>5000</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><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Toast.wrn</code></p><pre data-language="wrn"><code>component Toast &#123;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Toast&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;Toast&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/Toast.wrn</code></p><pre data-language="wrn"><code>component Toast &#123;
   props &#123;
-    class = &quot;&quot;
-    title = &quot;Saved&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Toast&quot;
     description = &quot;&quot;
-    variant = &quot;success&quot;
-    duration = 5000
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
   &#125;
-  state visible = true
   view &#123;
-        &lt;div data-show=&quot;visible&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; class=&quot;pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900 &#123;class&#125;&quot;&gt;
-        &lt;span class=&quot;mt-0.5 flex size-8 items-center justify-center rounded-full &#123;variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'&#125;&quot;&gt;&#123;variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'&#125;&lt;/span&gt;
-        &lt;div class=&quot;min-w-0 flex-1&quot;&gt;
-        &lt;p class=&quot;font-semibold&quot;&gt;&#123;title&#125;&lt;/p&gt;
-        &lt;p data-show=&quot;description&quot; class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/p&gt;
-        &lt;/div&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;Close&quot; @click=&quot;visible = false&quot; class=&quot;rounded-lg p-1 text-slate-400 hover:bg-slate-100&quot;&gt;×&lt;/button&gt;
-        &lt;/div&gt;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toast wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/toggle-count.wrn b/app/pages/components/toggle-count.wrn
new file mode 100644
index 00000000..8a844aed
--- /dev/null
+++ b/app/pages/components/toggle-count.wrn
@@ -0,0 +1,50 @@
+page ToggleCountcomponent {
+  seo {
+    title = "ToggleCount component"
+    description = "Theme-aware, responsive toggle count component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  name=&quot;name&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToggleCount&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;Toggle Count&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/ToggleCount.wrn</code></p><pre data-language="wrn"><code>component ToggleCount &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Toggle Count&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&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--toggle-count &#123;class&#125;&quot;&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;
+    &#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.5</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>
+  }
+}
diff --git a/app/pages/components/toggle-password.wrn b/app/pages/components/toggle-password.wrn
new file mode 100644
index 00000000..53ab7fe4
--- /dev/null
+++ b/app/pages/components/toggle-password.wrn
@@ -0,0 +1,182 @@
+page TogglePasswordcomponent {
+  seo {
+    title = "TogglePassword component"
+    description = "Accessible password field with optional show and hide controls."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  name=&quot;password&quot;
+  value=&quot;value&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TogglePassword&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;Password&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;password&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;Enter your password&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;current-password&quot;</code></td></tr><tr><td><code>minlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>maxlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>pattern</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).&#123;8,&#125;&quot;</code></td></tr><tr><td><code>fields</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>visible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>toggleable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>toggleMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>checkboxLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Show password&quot;</code></td></tr><tr><td><code>showLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Show password&quot;</code></td></tr><tr><td><code>hideLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Hide password&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>readonly</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>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</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>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><ul><li><code>input</code></li><li><code>change</code></li><li><code>toggle</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TogglePassword.wrn</code></p><pre data-language="wrn"><code>component TogglePassword &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    label = &quot;Password&quot;
+    name = &quot;password&quot;
+    value = &quot;&quot;
+    placeholder = &quot;Enter your password&quot;
+    autocomplete = &quot;current-password&quot;
+    minlength = &quot;&quot;
+    maxlength = &quot;&quot;
+    pattern = &quot;(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).&#123;8,&#125;&quot;
+    fields = []
+    visible = false
+    toggleable = true
+    toggleMode = &quot;button&quot;
+    checkboxLabel = &quot;Show password&quot;
+    showLabel = &quot;Show password&quot;
+    hideLabel = &quot;Hide password&quot;
+    disabled = false
+    readonly = false
+    required = false
+    invalid = false
+    helpText = &quot;&quot;
+    validationMessage = &quot;&quot;
+    class = &quot;&quot;
+    @event input = function
+    @event change = function
+    @event toggle = function
+  &#125;
+
+  state revealed = visible
+
+  functions &#123;
+    function toggleVisibility() &#123;
+      if (disabled || readonly || !toggleable) &#123;
+        return
+      &#125;
+      revealed = !revealed
+    &#125;
+
+    function fieldId(field, index) &#123;
+      return field.id || field.name || name + &quot;-&quot; + index
+    &#125;
+
+    function fieldName(field, index) &#123;
+      return field.name || name + &quot;-&quot; + index
+    &#125;
+  &#125;
+
+  view &#123;
+        &lt;fieldset
+      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toggle-password &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
+      data-wrn-toggle-password
+      data-visible=&quot;&#123;revealed ? 'true' : 'false'&#125;&quot;
+    &gt;
+      &#123;#if fields.length&#125;
+        &lt;div class=&quot;wire-next__password-fields&quot;&gt;
+          &#123;#each fields as field, index&#125;
+            &lt;div class=&quot;wire-next__password-field&quot;&gt;
+        &lt;label for=&quot;&#123;fieldId(field, index)&#125;&quot;&gt;&#123;field.label || label&#125;&lt;/label&gt;
+        &lt;div class=&quot;wire-next__password-control&quot;&gt;
+        &lt;input
+                  id=&quot;&#123;fieldId(field, index)&#125;&quot;
+                  type=&quot;&#123;revealed ? 'text' : 'password'&#125;&quot;
+                  name=&quot;&#123;fieldName(field, index)&#125;&quot;
+                  value=&quot;&#123;field.value || ''&#125;&quot;
+                  placeholder=&quot;&#123;field.placeholder || placeholder&#125;&quot;
+                  autocomplete=&quot;&#123;field.autocomplete || autocomplete&#125;&quot;
+                  minlength=&quot;&#123;field.minlength || minlength&#125;&quot;
+                  maxlength=&quot;&#123;field.maxlength || maxlength&#125;&quot;
+                  pattern=&quot;&#123;field.pattern || pattern&#125;&quot;
+                  disabled=&quot;&#123;disabled || field.disabled&#125;&quot;
+                  readonly=&quot;&#123;readonly || field.readonly&#125;&quot;
+                  required=&quot;&#123;required || field.required&#125;&quot;
+                  aria-invalid=&quot;&#123;invalid ? 'true' : 'false'&#125;&quot;
+                  @input=&quot;$emit('input', &#123; name: event.target.name, value: event.target.value, visible: revealed &#125;)&quot;
+                  @change=&quot;$emit('change', &#123; name: event.target.name, value: event.target.value, visible: revealed &#125;)&quot;
+                /&gt;
+                &#123;#if toggleable &amp;&amp; toggleMode === &quot;button&quot;&#125;
+                  &lt;button
+                    type=&quot;button&quot;
+                    class=&quot;wire-next__password-toggle&quot;
+                    aria-label=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
+                    title=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
+                    aria-pressed=&quot;&#123;revealed ? 'true' : 'false'&#125;&quot;
+                    disabled=&quot;&#123;disabled || readonly&#125;&quot;
+                    @click=&quot;toggleVisibility(); $emit('toggle', &#123; visible: revealed &#125;)&quot;
+                  &gt;
+        &lt;span class=&quot;wire-next__password-icon wire-next__password-icon--show&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+                &#123;/if&#125;
+              &lt;/div&gt;
+        &lt;/div&gt;
+          &#123;/each&#125;
+        &lt;/div&gt;
+      &#123;:else&#125;
+        &lt;label for=&quot;&#123;name&#125;-password&quot;&gt;&#123;label&#125;&lt;/label&gt;
+        &lt;div class=&quot;wire-next__password-control&quot;&gt;
+        &lt;input
+            &#123;...attrs&#125;
+            id=&quot;&#123;name&#125;-password&quot;
+            type=&quot;&#123;revealed ? 'text' : 'password'&#125;&quot;
+            name=&quot;&#123;name&#125;&quot;
+            value=&quot;&#123;value&#125;&quot;
+            placeholder=&quot;&#123;placeholder&#125;&quot;
+            autocomplete=&quot;&#123;autocomplete&#125;&quot;
+            minlength=&quot;&#123;minlength&#125;&quot;
+            maxlength=&quot;&#123;maxlength&#125;&quot;
+            pattern=&quot;&#123;pattern&#125;&quot;
+            disabled=&quot;&#123;disabled&#125;&quot;
+            readonly=&quot;&#123;readonly&#125;&quot;
+            required=&quot;&#123;required&#125;&quot;
+            aria-invalid=&quot;&#123;invalid ? 'true' : 'false'&#125;&quot;
+            aria-describedby=&quot;&#123;validationMessage ? name + '-validation' : helpText ? name + '-help' : ''&#125;&quot;
+            @input=&quot;$emit('input', &#123; value: event.target.value, visible: revealed &#125;)&quot;
+            @change=&quot;$emit('change', &#123; value: event.target.value, visible: revealed &#125;)&quot;
+          /&gt;
+          &#123;#if toggleable &amp;&amp; toggleMode === &quot;button&quot;&#125;
+            &lt;button
+              type=&quot;button&quot;
+              class=&quot;wire-next__password-toggle&quot;
+              aria-label=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
+              title=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
+              aria-pressed=&quot;&#123;revealed ? 'true' : 'false'&#125;&quot;
+              disabled=&quot;&#123;disabled || readonly&#125;&quot;
+              @click=&quot;toggleVisibility(); $emit('toggle', &#123; visible: revealed &#125;)&quot;
+            &gt;
+        &lt;span class=&quot;wire-next__password-icon wire-next__password-icon--show&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;/span&gt;
+        &lt;/button&gt;
+          &#123;/if&#125;
+        &lt;/div&gt;
+      &#123;/if&#125;
+      &#123;#if toggleable &amp;&amp; toggleMode === &quot;checkbox&quot;&#125;
+        &lt;label class=&quot;wire-next__password-checkbox&quot;&gt;
+        &lt;input
+            type=&quot;checkbox&quot;
+            checked=&quot;&#123;revealed&#125;&quot;
+            disabled=&quot;&#123;disabled || readonly&#125;&quot;
+            @change=&quot;revealed = event.target.checked; $emit('toggle', &#123; visible: revealed &#125;)&quot;
+          /&gt;
+        &lt;span&gt;&#123;checkboxLabel&#125;&lt;/span&gt;
+        &lt;/label&gt;
+      &#123;/if&#125;
+      &#123;#if helpText &amp;&amp; !validationMessage&#125;&lt;small id=&quot;&#123;name&#125;-help&quot;&gt;&#123;helpText&#125;&lt;/small&gt;&#123;/if&#125;
+      &lt;small
+        id=&quot;&#123;name&#125;-validation&quot;
+        class=&quot;wire-next__validation&quot;
+        data-error=&quot;&#123;name&#125;&quot;
+      &gt;&#123;validationMessage&#125;&lt;/small&gt;
+        &lt;/fieldset&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.5</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>
+  }
+}
diff --git a/app/pages/components/tooltip.wrn b/app/pages/components/tooltip.wrn
index a39f7bd4..243111f0 100644
--- a/app/pages/components/tooltip.wrn
+++ b/app/pages/components/tooltip.wrn
@@ -1,7 +1,7 @@
 page Tooltipcomponent {
   seo {
     title = "Tooltip component"
-    description = "Reusable tooltip component."
+    description = "Theme-aware, responsive tooltip component."
   }
 
   view {
@@ -10,27 +10,39 @@ 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.4</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.3.5</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">content component</span><h1>Tooltip</h1><p>Reusable tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 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
-  text=&quot;Helpful information&quot;
-  position=&quot;top&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Helpful information&quot;</code></td></tr><tr><td><code>position</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;top&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;
+      <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.5</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;
   props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Tooltip&quot;
+    description = &quot;&quot;
+    open = false
+    placement = &quot;bottom&quot;
+    closeLabel = &quot;Close&quot;
     class = &quot;&quot;
-    text = &quot;Helpful information&quot;
-    position = &quot;top&quot;
   &#125;
   view &#123;
-        &lt;span class=&quot;group relative inline-flex &#123;class&#125;&quot;&gt;
-        &lt;slot /&gt;
-        &lt;span role=&quot;tooltip&quot; class=&quot;pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 &#123;position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'&#125;&quot;&gt;&#123;text&#125;&lt;/span&gt;
-        &lt;/span&gt;
+        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--tooltip wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
+        &lt;header&gt;
+        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
+        &lt;/header&gt;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &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.4</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.3.5</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>
   }
diff --git a/app/pages/components/tree-view.wrn b/app/pages/components/tree-view.wrn
new file mode 100644
index 00000000..06f3b3c9
--- /dev/null
+++ b/app/pages/components/tree-view.wrn
@@ -0,0 +1,46 @@
+page TreeViewcomponent {
+  seo {
+    title = "TreeView component"
+    description = "Theme-aware, responsive tree view component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TreeView&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;Tree View&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/TreeView.wrn</code></p><pre data-language="wrn"><code>component TreeView &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Tree View&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--tree-view wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/components/typography.wrn b/app/pages/components/typography.wrn
index 52e51f5a..d3927617 100644
--- a/app/pages/components/typography.wrn
+++ b/app/pages/components/typography.wrn
@@ -1,7 +1,7 @@
 page Typographycomponent {
   seo {
     title = "Typography component"
-    description = "Reusable typography component."
+    description = "Theme-aware, responsive typography component."
   }
 
   view {
@@ -10,28 +10,32 @@ 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.4</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.3.5</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">core component</span><h1>Typography</h1><p>Reusable typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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;Typography
-  as=&quot;p&quot;
-  variant=&quot;body&quot;
-  align=&quot;start&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Typography&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>as</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;p&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;body&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&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/Typography.wrn</code></p><pre data-language="wrn"><code>component Typography &#123;
+      <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.5</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;
+  gap=&quot;md&quot;
+  maxWidth=&quot;xl&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Typography&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/Typography.wrn</code></p><pre data-language="wrn"><code>component Typography &#123;
   props &#123;
-    as = &quot;p&quot;
-    variant = &quot;body&quot;
-    align = &quot;start&quot;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    columns = 2
+    gap = &quot;md&quot;
+    maxWidth = &quot;xl&quot;
     class = &quot;&quot;
   &#125;
   view &#123;
-        &lt;div class=&quot;wire-type wire-type--&#123;variant&#125; wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;
+        &lt;article class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--typography wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#125;&quot;&gt;
         &lt;slot /&gt;
-        &lt;/div&gt;
+        &lt;/article&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.4</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.3.5</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>
   }
diff --git a/app/pages/components/wysiwyg-editor.wrn b/app/pages/components/wysiwyg-editor.wrn
new file mode 100644
index 00000000..1647f826
--- /dev/null
+++ b/app/pages/components/wysiwyg-editor.wrn
@@ -0,0 +1,46 @@
+page WysiwygEditorcomponent {
+  seo {
+    title = "WysiwygEditor component"
+    description = "Theme-aware, responsive wysiwyg editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <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.5</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.5</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;
+  description=&quot;description&quot;
+  items=&quot;[]&quot;
+/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WysiwygEditor&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;Wysiwyg Editor&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/WysiwygEditor.wrn</code></p><pre data-language="wrn"><code>component WysiwygEditor &#123;
+  props &#123;
+    size = &quot;default&quot;
+    color = &quot;primary&quot;
+    title = &quot;Wysiwyg Editor&quot;
+    description = &quot;&quot;
+    items = []
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--wysiwyg-editor wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
+      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
+      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
+      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
+      &lt;slot /&gt;
+        &lt;/section&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.5</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>
+  }
+}
diff --git a/app/pages/packages.wrn b/app/pages/packages.wrn
index 4109cc37..d6e387ef 100644
--- a/app/pages/packages.wrn
+++ b/app/pages/packages.wrn
@@ -12,10 +12,10 @@ page Packages {
       <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.4</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.3.5</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="page"><section class="hero compact"><span class="eyebrow">26 focused packages</span><h1>Package reference</h1><p>Everything in the framework, organized by responsibility and documented from the published 0.3.4 APIs.</p><input class="search" type="search" placeholder="Search packages, features, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter packages by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>26</span></button><button type="button" @click="category = 'AI'">AI<span>1</span></button><button type="button" @click="category = 'Security'">Security<span>5</span></button><button type="button" @click="category = 'Tooling'">Tooling<span>3</span></button><button type="button" @click="category = 'Core'">Core<span>3</span></button><button type="button" @click="category = 'Frontend'">Frontend<span>5</span></button><button type="button" @click="category = 'Data'">Data<span>3</span></button><button type="button" @click="category = 'Runtime'">Runtime<span>3</span></button><button type="button" @click="category = 'Native'">Native<span>2</span></button><button type="button" @click="category = 'Realtime'">Realtime<span>1</span></button></div><p>Showing <strong>{category}</strong> packages</p></section><section class="package-grid"><a class="package-card" href="/packages/ai" data-show="(category === 'All' ? true : category === 'AI') ? (query === '' ? true : 'ai ai server-side anthropic client with generation and streaming. '.includes(query.toLowerCase())) : false">
+      <main class="page"><section class="hero compact"><span class="eyebrow">26 focused packages</span><h1>Package reference</h1><p>Everything in the framework, organized by responsibility and documented from the published 0.3.5 APIs.</p><input class="search" type="search" placeholder="Search packages, features, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter packages by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>26</span></button><button type="button" @click="category = 'AI'">AI<span>1</span></button><button type="button" @click="category = 'Security'">Security<span>5</span></button><button type="button" @click="category = 'Tooling'">Tooling<span>3</span></button><button type="button" @click="category = 'Core'">Core<span>3</span></button><button type="button" @click="category = 'Frontend'">Frontend<span>5</span></button><button type="button" @click="category = 'Data'">Data<span>3</span></button><button type="button" @click="category = 'Runtime'">Runtime<span>3</span></button><button type="button" @click="category = 'Native'">Native<span>2</span></button><button type="button" @click="category = 'Realtime'">Realtime<span>1</span></button></div><p>Showing <strong>{category}</strong> packages</p></section><section class="package-grid"><a class="package-card" href="/packages/ai" data-show="(category === 'All' ? true : category === 'AI') ? (query === '' ? true : 'ai ai server-side anthropic client with generation and streaming. '.includes(query.toLowerCase())) : false">
           <span class="category">AI</span><h2>@wrnexus/ai</h2><p>Server-side Anthropic client with generation and streaming.</p><span class="card-link">Open documentation →</span>
         </a>
 <a class="package-card" href="/packages/authz" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'authz security role, permission, policy, and authorization guards. '.includes(query.toLowerCase())) : false">
@@ -93,7 +93,7 @@ page Packages {
 <a class="package-card" href="/packages/validation" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'validation security typed schemas, coercion, validation, and browser descriptors. '.includes(query.toLowerCase())) : false">
           <span class="category">Security</span><h2>@wrnexus/validation</h2><p>Typed schemas, coercion, validation, and browser descriptors.</p><span class="card-link">Open documentation →</span>
         </a></section></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/ai.wrn b/app/pages/packages/ai.wrn
index ac37d84f..a1a86cdc 100644
--- a/app/pages/packages/ai.wrn
+++ b/app/pages/packages/ai.wrn
@@ -10,11 +10,11 @@ page wrnexusai {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ai</span></nav><section class="doc-intro"><span class="eyebrow">AI · Package reference</span><h1>@wrnexus/ai</h1><p>Server-side Anthropic client with generation and streaming.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>AI</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ai@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>A tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps — generate and stream text with Claude from any server-side code.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ai</span></nav><section class="doc-intro"><span class="eyebrow">AI · Package reference</span><h1>@wrnexus/ai</h1><p>Server-side Anthropic client with generation and streaming.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>AI</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ai@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>A tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps — generate and stream text with Claude from any server-side code.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/ai</code> is a thin, dependency-free wrapper over the Anthropic <strong>Messages API</strong>, built on <code>fetch</code> (Bun-native, no SDK). Use it in API routes, jobs, or middleware to call Claude. It defaults to the most capable model, <strong><code>claude-opus-4-8</code></strong>, reads your key from <code>ANTHROPIC_API_KEY</code>, and supports both one-shot generation and streaming.</p>
@@ -201,7 +201,7 @@ export const POST = async (ctx) =&gt; &#123;
 &#125;;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#createai-config">createAI(config?)</a><a class="toc-level-4" href="#ai-generate-prompt-opts-promise-string">ai.generate(prompt, opts?): Promise&lt;string&gt;</a><a class="toc-level-4" href="#ai-stream-prompt-opts-asyncgenerator-string">ai.stream(prompt, opts?): AsyncGenerator&lt;string&gt;</a><a class="toc-level-4" href="#ai-streamresponse-prompt-opts-response">ai.streamResponse(prompt, opts?): Response</a><a class="toc-level-4" href="#generateoptions">GenerateOptions</a><a class="toc-level-4" href="#aierror">AIError</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#return-generated-json-from-an-api-route">Return generated JSON from an API route</a><a class="toc-level-4" href="#stream-a-chat-response-to-the-browser">Stream a chat response to the browser</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/authz.wrn b/app/pages/packages/authz.wrn
index 4d80fa53..fe51329d 100644
--- a/app/pages/packages/authz.wrn
+++ b/app/pages/packages/authz.wrn
@@ -10,11 +10,11 @@ page wrnexusauthz {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/authz</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/authz</h1><p>Role, permission, policy, and authorization guards.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/authz@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Composable authorization for WRNexusJS — role-based (RBAC), policy-based (PBAC), and attribute-based (ABAC) access control that reduces to a boolean check plus an <code>authorize()</code> guard.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/authz</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/authz</h1><p>Role, permission, policy, and authorization guards.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/authz@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Composable authorization for WRNexusJS — role-based (RBAC), policy-based (PBAC), and attribute-based (ABAC) access control that reduces to a boolean check plus an <code>authorize()</code> guard.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/authz</code> is a small, server-side authorization toolkit. It gives you three interchangeable models — RBAC (roles → permissions), PBAC (policy predicates), and ABAC (attribute matchers) — that all collapse to a <code>boolean | Promise&lt;boolean&gt;</code> decision. Wrap any decision in a <code>Middleware</code> guard (<code>authorize</code>, <code>requireRole</code>, <code>requirePermission</code>) to protect WRNexusJS routes. Reach for it whenever a route or action needs to be gated on who the user is, what roles they hold, or attributes of the user and the resource. It plugs into <code>@wrnexus/core</code> by reading <code>ctx.user</code> as the authorization subject.</p>
@@ -226,7 +226,7 @@ app.put(
 );</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#types">Types</a><a class="toc-level-4" href="#rbac">RBAC</a><a class="toc-level-4" href="#definerbac-roles-record-string-string-rbac">defineRbac(roles: Record&lt;string, string[]&gt;): Rbac</a><a class="toc-level-4" href="#hasrole-subject-subject-undefined-required-string-boolean">hasRole(subject: Subject | undefined, ...required: string[]): boolean</a><a class="toc-level-4" href="#pbac-abac-combinators">PBAC / ABAC combinators</a><a class="toc-level-4" href="#guards-middleware">Guards (middleware)</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#rbac-2">RBAC</a><a class="toc-level-4" href="#guarding-routes">Guarding routes</a><a class="toc-level-4" href="#pbac-abac-policies">PBAC / ABAC policies</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/cli.wrn b/app/pages/packages/cli.wrn
index e86d4578..11a78910 100644
--- a/app/pages/packages/cli.wrn
+++ b/app/pages/packages/cli.wrn
@@ -10,11 +10,11 @@ page wrnexuscli {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/cli</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/cli</h1><p>Create, develop, build, generate, test, and maintain WRNexusJS apps.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/cli@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The <code>wrnexus</code> command-line tool that scaffolds, runs, builds, tests, and manages WRNexusJS apps.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/cli</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/cli</h1><p>Create, develop, build, generate, test, and maintain WRNexusJS apps.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/cli@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The <code>wrnexus</code> command-line tool that scaffolds, runs, builds, tests, and manages WRNexusJS apps.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/cli</code> provides the <code>wrnexus</code> executable — the single entry point for developing a WRNexusJS app. It runs the HMR dev server, produces a self-contained production build, scaffolds apps/pages/components, drives database migrations, regenerates typed routes and queries, runs tests, and manages configuration profiles. It also scaffolds multi-app monorepos and serves them behind a domain-routing gateway. This is a CLI/build-time package (it shells out to the Bun binary for the dev child and tests) and it also exports the workspace config types via a subpath.</p>
@@ -153,7 +153,7 @@ wrnexus update --latest
 wrnexus doctor</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#commands">Commands</a><a class="toc-level-4" href="#wrnexus-dev">wrnexus dev</a><a class="toc-level-4" href="#wrnexus-build">wrnexus build</a><a class="toc-level-4" href="#wrnexus-create">wrnexus create</a><a class="toc-level-4" href="#wrnexus-update">wrnexus update</a><a class="toc-level-4" href="#wrnexus-generate">wrnexus generate</a><a class="toc-level-4" href="#wrnexus-eject">wrnexus eject</a><a class="toc-level-4" href="#wrnexus-db">wrnexus db</a><a class="toc-level-4" href="#wrnexus-workspace-and-wrnexus-gateway">wrnexus workspace and wrnexus gateway</a><a class="toc-level-4" href="#wrnexus-test">wrnexus test</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#create-and-run-a-single-application">Create and run a single application</a><a class="toc-level-4" href="#add-routes-and-shared-ui-to-an-existing-app">Add routes and shared UI to an existing app</a><a class="toc-level-4" href="#create-a-multi-app-workspace-and-add-another-app">Create a multi-app workspace and add another app</a><a class="toc-level-4" href="#upgrade-with-migrations-and-verification">Upgrade with migrations and verification</a><a class="toc-level-3" href="#profiles">Profiles</a><a class="toc-level-3" href="#subpath-exports">Subpath exports</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/compiler.wrn b/app/pages/packages/compiler.wrn
index 6a5cae16..697501f9 100644
--- a/app/pages/packages/compiler.wrn
+++ b/app/pages/packages/compiler.wrn
@@ -10,11 +10,11 @@ page wrnexuscompiler {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/compiler</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/compiler</h1><p>Parser and code generators for the .wrn language.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/compiler@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Compiler for the <code>.wrn</code> language — tokenizes, parses, and lowers <code>.wrn</code> page and component files to TypeScript.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/compiler</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/compiler</h1><p>Parser and code generators for the .wrn language.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/compiler@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Compiler for the <code>.wrn</code> language — tokenizes, parses, and lowers <code>.wrn</code> page and component files to TypeScript.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/compiler</code> turns <code>.wrn</code> source into TypeScript that targets the framework's runtime primitives. A <code>.wrn</code> file declares either a <code>page</code> (a route) or a <code>component</code> (a reusable, prop-driven fragment) with blocks for <code>state</code>, <code>view</code> (plain HTML), <code>seo</code>, <code>style</code>, <code>functions</code>, <code>api</code>, <code>ssr</code>/<code>client</code> data bindings, and <code>realtime</code> websocket handlers. The pipeline is <code>source → Lexer → parse() → PageAst → generate() → TypeScript</code>. It is a build/server-side library — the WRNexusJS dev loader calls it to compile <code>.wrn</code> files on the fly, surfacing <code>ParseError</code> as a readable error page.</p>
@@ -108,6 +108,7 @@ lx.next(); // &#123; type: &quot;lbrace&quot;, value: &quot;&#123;&quot;, pos: 1
 <li><code>layout = &quot;&lt;name&gt;&quot;</code> — selects <code>app/layouts/&lt;name&gt;.wrn</code> (pages only).</li>
 <li><code>types &#123; &lt;TypeScript declarations&gt; &#125;</code> — reusable interfaces and aliases for the current file.</li>
 <li><code>props &#123; name: Type = &lt;default&gt; ... &#125;</code> — typed component props. Omit <code>= &lt;default&gt;</code> to make a prop required. Legacy inferred props remain supported.</li>
+<li><code>@event name = function</code> inside <code>props</code> — declares a public component event. Emit it from component behavior with <code>name(detail)</code> or <code>$emit(&quot;name&quot;, detail)</code>, and consume it with <code>&lt;Component @name=&quot;handler(event)&quot; /&gt;</code>.</li>
 <li><code>state &lt;ident&gt;: Type = &lt;expr&gt;</code> — typed reactive state seeded from a raw JS expression. The annotation is optional for backward compatibility.</li>
 <li><code>view &#123; &lt;html&gt; &#125;</code> — plain HTML with <code>&#123;expr&#125;</code> interpolation in text and attributes, hyphenated attributes, boolean attributes, <code>@event=&quot;...&quot;</code> client bindings, and <code>&lt;!-- comments --&gt;</code>. Attribute expressions that reference <code>state</code> keep an SSR value and update reactively in the browser.</li>
 <li><code>seo &#123; key = &quot;value&quot; ... &#125;</code> — metadata merged into the generated <code>meta</code>.</li>
@@ -123,7 +124,7 @@ lx.next(); // &#123; type: &quot;lbrace&quot;, value: &quot;&#123;&quot;, pos: 1
 <li>Pure TypeScript with no runtime dependencies; runs under <strong>Bun</strong> as part of the WRNexusJS toolchain (Node is not supported).</li>
 <li>Generated modules target WRNexusJS runtime primitives (<code>data-scope</code>, <code>data-text</code>, <code>data-on-*</code>, <code>data-for</code>, <code>data-component</code>, <code>__wrnexus*</code>/<code>__wire*</code> helpers) — consume the output within a WRNexusJS app, e.g. via <code>@wrnexus/core</code>'s dev loader.</li>
 </ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; PageAst as PageAst$1, WrnDiagnostic &#125; from '@wrnexus/syntax';
-export &#123; ActionBlock, ApiBlock, Attr, ComputedDecl, DataApiBlock, DataMode, EffectBlock, LexError, Lexer, LoadBlock, ModeFunctionsBlock, PageAst, ParseError, PropDecl, RealtimeBlock, SeoBlock, StateDecl, ViewNode, WrnDiagnostic, assertValidAst, diagnose, diagnosticFromError, eraseFunctionTypes, formatDiagnostic, inferredRuntimeType, parse, runtimeTypeOf &#125; from '@wrnexus/syntax';
+export &#123; ActionBlock, ApiBlock, Attr, ComputedDecl, DataApiBlock, DataMode, EffectBlock, EventDecl, LexError, Lexer, LoadBlock, ModeFunctionsBlock, PageAst, ParseError, PropDecl, RealtimeBlock, SeoBlock, StateDecl, ViewNode, WrnDiagnostic, assertValidAst, diagnose, diagnosticFromError, eraseFunctionTypes, formatDiagnostic, inferredRuntimeType, parse, runtimeTypeOf &#125; from '@wrnexus/syntax';
 import &#123; PageAst &#125; from '@wrnexus/syntax/parser';
 
 /**
@@ -207,7 +208,7 @@ lx.next(); // &#123; type: &quot;ident&quot;, value: &quot;Home&quot;, pos: 5 &#
 lx.next(); // &#123; type: &quot;lbrace&quot;, value: &quot;&#123;&quot;, pos: 10 &#125;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#compilewirefile-source-string-string">compileWireFile(source: string): string</a><a class="toc-level-4" href="#compile-source-string-compileresult">compile(source: string): CompileResult</a><a class="toc-level-4" href="#parse-source-string-pageast">parse(source: string): PageAst</a><a class="toc-level-4" href="#generate-ast-pageast-string">generate(ast: PageAst): string</a><a class="toc-level-4" href="#lexer">Lexer</a><a class="toc-level-4" href="#errors">Errors</a><a class="toc-level-4" href="#ast-types">AST types</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#the-wrn-language-as-parsed">The .wrn language (as parsed)</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/core.wrn b/app/pages/packages/core.wrn
index 2d771743..4c94e608 100644
--- a/app/pages/packages/core.wrn
+++ b/app/pages/packages/core.wrn
@@ -10,11 +10,11 @@ page wrnexuscore {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/core</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/core</h1><p>Contexts, middleware, security, sessions, caching, JSX, and realtime.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/core@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The framework core: the request <code>Context</code>, middleware contract, and the security, session, caching, streaming, realtime, and JSX primitives every other WRNexusJS package builds on.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/core</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/core</h1><p>Contexts, middleware, security, sessions, caching, JSX, and realtime.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/core@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The framework core: the request <code>Context</code>, middleware contract, and the security, session, caching, streaming, realtime, and JSX primitives every other WRNexusJS package builds on.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/core</code> is the shared foundation of WRNexusJS. It defines the <code>Context</code> object that flows through every middleware, page, and API route, plus the <code>Middleware</code>/<code>Next</code> contract they implement. On top of that it ships the building blocks a real app needs: cookie-backed sessions, password auth, CSRF protection, rate limiting, request logging, HTTP + in-memory caching, file uploads, streaming/SSE responses, WebSocket &quot;rooms&quot;, security headers/CORS, and a server-side JSX runtime that renders to HTML strings. Everything here is <strong>server-side</strong> and Bun-native (it uses <code>Bun.password</code>, <code>Bun.write</code>, the web-standard <code>Request</code>/<code>Response</code>, and <code>crypto</code>). You depend on it directly and transitively through the rest of the framework.</p>
@@ -1136,7 +1136,7 @@ const registry = createRealtimeRegistry();
 bridgeRealtime(registry, createPubSub(redisDriver(process.env.REDIS_URL)));</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#context-middleware-wrnexus-core">Context &amp; middleware — @wrnexus/core</a><a class="toc-level-4" href="#authentication-wrnexus-core">Authentication — @wrnexus/core</a><a class="toc-level-4" href="#csrf-wrnexus-core">CSRF — @wrnexus/core</a><a class="toc-level-4" href="#rate-limiting-wrnexus-core">Rate limiting — @wrnexus/core</a><a class="toc-level-4" href="#request-logging-wrnexus-core">Request logging — @wrnexus/core</a><a class="toc-level-4" href="#caching-wrnexus-core">Caching — @wrnexus/core</a><a class="toc-level-4" href="#file-uploads-wrnexus-core">File uploads — @wrnexus/core</a><a class="toc-level-4" href="#streaming-sse-wrnexus-core">Streaming &amp; SSE — @wrnexus/core</a><a class="toc-level-4" href="#realtime-rooms-wrnexus-core">Realtime rooms — @wrnexus/core</a><a class="toc-level-4" href="#error-pages-wrnexus-core">Error pages — @wrnexus/core</a><a class="toc-level-4" href="#security-headers-cors-wrnexus-core">Security headers &amp; CORS — @wrnexus/core</a><a class="toc-level-4" href="#storage-cookies-sessions-localstorage-wrnexus-core">Storage: cookies, sessions, localStorage — @wrnexus/core</a><a class="toc-level-4" href="#low-level-security-helpers-wrnexus-core">Low-level security helpers — @wrnexus/core</a><a class="toc-level-4" href="#jsx-runtime-wrnexus-core-wrnexus-core-jsx-runtime-wrnexus-core-jsx-dev-runtime">JSX runtime — @wrnexus/core, @wrnexus/core/jsx-runtime, @wrnexus/core/jsx-dev-runtime</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#a-minimal-middleware-chain">A minimal middleware chain</a><a class="toc-level-4" href="#password-auth">Password auth</a><a class="toc-level-4" href="#http-caching-with-etags">HTTP caching with ETags</a><a class="toc-level-4" href="#streaming-sse">Streaming SSE</a><a class="toc-level-4" href="#a-realtime-room">A realtime room</a><a class="toc-level-4" href="#jsx-rendering">JSX rendering</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/csr.wrn b/app/pages/packages/csr.wrn
index 84be933c..4c86aa9a 100644
--- a/app/pages/packages/csr.wrn
+++ b/app/pages/packages/csr.wrn
@@ -10,11 +10,11 @@ page wrnexuscsr {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/csr</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/csr</h1><p>Reactive, navigation, and realtime browser runtimes.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/csr@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The browser-side client runtime for WRNexusJS — generic, self-contained JS that hydrates server-rendered pages with reactivity, client-side navigation, and realtime rooms.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/csr</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/csr</h1><p>Reactive, navigation, and realtime browser runtimes.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/csr@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The browser-side client runtime for WRNexusJS — generic, self-contained JS that hydrates server-rendered pages with reactivity, client-side navigation, and realtime rooms.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/csr</code> holds the three client runtimes that WRNexusJS serves to the browser. Components are authored as <code>.wrn</code> files and rendered on the <strong>server</strong>; this package provides the single, generic runtime that <strong>hydrates</strong> that HTML in the browser — there are no per-component browser bundles. Each runtime is exported as a plain-JS string (no build step, no imports) intended to be served verbatim from a well-known URL:</p>
@@ -251,7 +251,7 @@ room.on(&quot;chat&quot;, (msg) =&gt; console.log(msg.user, msg.text));
 room.send(&#123; type: &quot;chat&quot;, user: &quot;ada&quot;, text: &quot;hi&quot; &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#runtime-strings">Runtime strings</a><a class="toc-level-4" href="#accessor-functions">Accessor functions</a><a class="toc-level-4" href="#browser-reactive-directives">Browser: reactive directives</a><a class="toc-level-4" href="#browser-navigation">Browser: navigation</a><a class="toc-level-4" href="#browser-realtime-rooms">Browser: realtime rooms</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/db.wrn b/app/pages/packages/db.wrn
index 9a9d36d9..45f6f322 100644
--- a/app/pages/packages/db.wrn
+++ b/app/pages/packages/db.wrn
@@ -10,11 +10,11 @@ page wrnexusdb {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/db</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/db</h1><p>Database adapters, typed queries, models, migrations, and sessions.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/db@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The database layer for WRNexusJS: TS models as the single source of truth for DDL, validation, and result typing, plus a driver-based <code>Db</code> client, migrations, and a sqlc-style query generator.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/db</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/db</h1><p>Database adapters, typed queries, models, migrations, and sessions.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/db@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The database layer for WRNexusJS: TS models as the single source of truth for DDL, validation, and result typing, plus a driver-based <code>Db</code> client, migrations, and a sqlc-style query generator.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/db</code> is the server-side data layer. You describe tables as TypeScript models (the <code>v</code> column builder + <code>table()</code>); those models drive migrations, coerce raw DB rows into typed objects, and feed the query generator. A thin <code>Driver</code> interface is implemented by adapters for SQLite (<code>bun:sqlite</code>), Postgres/MySQL (<code>Bun.SQL</code>), and MongoDB. The <code>Db</code> client adds ergonomics — model-mapped <code>all</code>/<code>one</code>, transactions, <code>createTable</code>, pagination, and batched relation loading. A process-wide registry (<code>getDb</code>/<code>setDb</code>) exposes configured connections to pages and API routes. Reach for it whenever a WRNexusJS app needs persistence.</p>
@@ -340,7 +340,7 @@ await repo.insert(&#123; email: &quot;a@b.com&quot; &#125;);
 const active = await repo.find(&#123; active: true &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#schema-v-table-column">Schema — v, table, Column</a><a class="toc-level-4" href="#driver-client-createdb-db-driver">Driver &amp; client — createDb, Db, Driver</a><a class="toc-level-4" href="#client-registry-getdb-setdb">Client registry — getDb / setDb</a><a class="toc-level-4" href="#adapters">Adapters</a><a class="toc-level-4" href="#migrations">Migrations</a><a class="toc-level-4" href="#query-generator-sqlc-style">Query generator (sqlc-style)</a><a class="toc-level-4" href="#query-helpers">Query helpers</a><a class="toc-level-4" href="#session-store">Session store</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#configuration">Configuration</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/dev-server.wrn b/app/pages/packages/dev-server.wrn
index 2af2bddd..bc2024ec 100644
--- a/app/pages/packages/dev-server.wrn
+++ b/app/pages/packages/dev-server.wrn
@@ -10,11 +10,11 @@ page wrnexusdevserver {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/dev-server</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/dev-server</h1><p>Development and production servers, HMR, assets, and gateways.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/dev-server@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The WRNexusJS HTTP + WebSocket server runtime — request dispatch, SSR document assembly, live-reload (HMR), and the portable production handler.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/dev-server</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/dev-server</h1><p>Development and production servers, HMR, assets, and gateways.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/dev-server@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The WRNexusJS HTTP + WebSocket server runtime — request dispatch, SSR document assembly, live-reload (HMR), and the portable production handler.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>This package is the server runtime that powers a WRNexusJS app in both development and production. A single <strong>request runtime</strong> (<code>createHandlers</code>) owns HTTP/WebSocket dispatch and SSR document assembly; it knows nothing about _how_ modules and assets are produced, so the dev and prod entry points wire in different backends: dev uses dynamic module loading plus on-the-fly bundling and injects a live-reload client; prod uses a static, pre-built manifest with cache-immutable assets. The package also ships a multi-app <strong>gateway</strong> (route several apps by <code>Host</code> header behind one port) and a portable <code>node:http</code> adapter for WinterCG hosts. It is entirely server-side and Bun-native (<code>Bun.serve</code>, <code>Bun.file</code>, <code>Bun.gzipSync</code>).</p>
@@ -716,7 +716,7 @@ await startGateway(&#123;
 &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#main-entry-wrnexus-dev-server">Main entry (@wrnexus/dev-server)</a><a class="toc-level-4" href="#startserver-opts">startServer(opts)</a><a class="toc-level-4" href="#createhandlers-deps">createHandlers(deps)</a><a class="toc-level-4" href="#createproductionserver-manifest-opts-createproductionhandlers-manifest-opts">createProductionServer(manifest, opts) / createProductionHandlers(manifest, opts)</a><a class="toc-level-4" href="#startgateway-opts-multi-app-gateway">startGateway(opts) — multi-app gateway</a><a class="toc-level-4" href="#node-http-adapter-from-adapters-node-ts">node:http adapter (from ./adapters/node.ts)</a><a class="toc-level-4" href="#subpath-export-wrnexus-dev-server-serve-entry">Subpath export: @wrnexus/dev-server/serve-entry</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#programmatic-dev-server">Programmatic dev server</a><a class="toc-level-4" href="#production-server-from-a-build-manifest">Production server from a build manifest</a><a class="toc-level-4" href="#embedding-the-handler-on-node-http">Embedding the handler on node:http</a><a class="toc-level-4" href="#multi-app-gateway">Multi-app gateway</a><a class="toc-level-3" href="#framework-asset-routes">Framework asset routes</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/encryption.wrn b/app/pages/packages/encryption.wrn
index 912687ad..a9295c63 100644
--- a/app/pages/packages/encryption.wrn
+++ b/app/pages/packages/encryption.wrn
@@ -10,11 +10,11 @@ page wrnexusencryption {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/encryption</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/encryption</h1><p>Hashing, HMAC, authenticated encryption, and key derivation.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/encryption@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free crypto helpers for WRNexusJS: authenticated symmetric encryption (AES-256-GCM), hashing, and HMAC signing.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/encryption</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/encryption</h1><p>Hashing, HMAC, authenticated encryption, and key derivation.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/encryption@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free crypto helpers for WRNexusJS: authenticated symmetric encryption (AES-256-GCM), hashing, and HMAC signing.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>This package provides small, focused cryptographic primitives for server-side use: encrypting secrets/tokens/database fields at rest with AES-256-GCM, deriving keys from passwords via PBKDF2, computing SHA-256 digests, and signing/verifying payloads with HMAC-SHA256. It is built entirely on the standard <strong>Web Crypto API</strong> (<code>crypto.subtle</code>) plus <code>btoa</code>/<code>atob</code> and <code>TextEncoder</code>/<code>TextDecoder</code> — no third-party dependencies. Reach for it whenever you need to protect sensitive values or verify webhook signatures. All functions are <code>async</code> (Web Crypto is promise-based).</p>
@@ -107,7 +107,7 @@ const ok = await hmacVerify(rawBody, webhookSecret, incomingSignatureHeader);
 if (!ok) throw new Error(&quot;Invalid webhook signature&quot;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/helpers.wrn b/app/pages/packages/helpers.wrn
index d79c864f..df49b82c 100644
--- a/app/pages/packages/helpers.wrn
+++ b/app/pages/packages/helpers.wrn
@@ -10,11 +10,11 @@ page wrnexushelpers {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/helpers</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/helpers</h1><p>Safe Context URL helpers and forward-auth login redirects.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/helpers@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><p>Safe convenience helpers for common WRNexusJS application flows. The package uses standard <code>Context</code>, <code>URL</code>, and <code>Response</code> values and has no runtime dependency beyond <code>@wrnexus/core</code>.</p>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/helpers</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/helpers</h1><p>Safe Context URL helpers and forward-auth login redirects.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/helpers@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><p>Safe convenience helpers for common WRNexusJS application flows. The package uses standard <code>Context</code>, <code>URL</code>, and <code>Response</code> values and has no runtime dependency beyond <code>@wrnexus/core</code>.</p>
 <pre data-language="bash"><code>bun add @wrnexus/helpers</code></pre>
 <p>The package is private, so the machine must be authenticated to the <code>wrnexus</code> npm organization.</p>
 <h3 id="usage">Usage</h3>
@@ -135,7 +135,7 @@ export const GET = async (ctx: Context) =&gt; &#123;
 &#125;;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#redirect-an-unauthenticated-forward-auth-request">Redirect an unauthenticated forward-auth request</a><a class="toc-level-4" href="#support-dynamic-tenant-domains">Support dynamic tenant domains</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/i18n.wrn b/app/pages/packages/i18n.wrn
index a019cb54..0b152a68 100644
--- a/app/pages/packages/i18n.wrn
+++ b/app/pages/packages/i18n.wrn
@@ -10,11 +10,11 @@ page wrnexusi18n {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/i18n</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/i18n</h1><p>Translation loading, locale resolution, and Intl formatting.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/i18n@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Per-request translations plus locale-aware number, date, and currency formatting for WRNexusJS apps.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/i18n</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/i18n</h1><p>Translation loading, locale resolution, and Intl formatting.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/i18n@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Per-request translations plus locale-aware number, date, and currency formatting for WRNexusJS apps.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/i18n</code> loads locale files from <code>app/locales/&lt;lang&gt;.json</code>, resolves the active language for each request (cookie → <code>Accept-Language</code> → default), and builds a <code>t(key, params)</code> translator used both in server code and in <code>.wrn</code> views. It also ships Intl-based formatting helpers and a tiny client runtime that wires up a language switcher. Translation lookup, language resolution, and HTML marker rewriting run server-side; only the small <code>I18N_RUNTIME</code> snippet runs in the browser.</p>
@@ -231,7 +231,7 @@ formatRelativeTime(-3, &quot;day&quot;, lang); // &quot;3 days ago&quot;
 plural(2, &#123; one: &quot;# item&quot;, other: &quot;# items&quot; &#125;, lang); // &quot;2 items&quot;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#loading-resolving">Loading &amp; resolving</a><a class="toc-level-4" href="#types-constants">Types &amp; constants</a><a class="toc-level-4" href="#html-client-runtime">HTML &amp; client runtime</a><a class="toc-level-4" href="#formatting-helpers-re-exported-from-format-ts">Formatting helpers (re-exported from ./format.ts)</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#server-load-resolve-translate">Server: load, resolve, translate</a><a class="toc-level-4" href="#views-translation-markers">Views: translation markers</a><a class="toc-level-4" href="#client-language-switcher">Client: language switcher</a><a class="toc-level-4" href="#formatting">Formatting</a><a class="toc-level-3" href="#configuration">Configuration</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/jwt.wrn b/app/pages/packages/jwt.wrn
index ed52befe..10e889b0 100644
--- a/app/pages/packages/jwt.wrn
+++ b/app/pages/packages/jwt.wrn
@@ -10,11 +10,11 @@ page wrnexusjwt {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/jwt</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/jwt</h1><p>HS256 JWT signing, verification, and bearer authentication.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/jwt@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free JSON Web Tokens (HS256) via Web Crypto, plus a bearer-token auth middleware for WRNexusJS.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/jwt</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/jwt</h1><p>HS256 JWT signing, verification, and bearer authentication.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/jwt@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free JSON Web Tokens (HS256) via Web Crypto, plus a bearer-token auth middleware for WRNexusJS.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/jwt</code> signs and verifies stateless JSON Web Tokens using the <strong>HS256</strong> (HMAC-SHA-256) algorithm. It has no runtime dependencies — signing and verification are implemented directly on the standard <strong>Web Crypto</strong> API (<code>crypto.subtle</code>), which Bun provides natively. It runs server-side and pairs with the session-based auth in <code>@wrnexus/core</code>, giving you a stateless option for API and mobile clients. Reach for it when you need bearer-token auth rather than cookie sessions.</p>
@@ -164,7 +164,7 @@ app.use(jwtAuth(&#123; secret: process.env.JWT_SECRET! &#125;));
 app.use(jwtAuth(&#123; secret: process.env.JWT_SECRET!, required: false &#125;));</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#signjwt-payload-secret-options">signJwt(payload, secret, options?)</a><a class="toc-level-4" href="#verifyjwt-t-token-secret-options">verifyJwt&lt;T&gt;(token, secret, options?)</a><a class="toc-level-4" href="#jwtauth-options">jwtAuth(options)</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/mobile.wrn b/app/pages/packages/mobile.wrn
index 4c8d0573..04931a90 100644
--- a/app/pages/packages/mobile.wrn
+++ b/app/pages/packages/mobile.wrn
@@ -10,11 +10,11 @@ page wrnexusmobile {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/mobile</span></nav><section class="doc-intro"><span class="eyebrow">Native · Package reference</span><h1>@wrnexus/mobile</h1><p>SSR-safe compatibility access to Capacitor plugins.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Native</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/mobile@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>SSR-safe access to Capacitor plugins from WRNexusJS browser code.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/mobile</span></nav><section class="doc-intro"><span class="eyebrow">Native · Package reference</span><h1>@wrnexus/mobile</h1><p>SSR-safe compatibility access to Capacitor plugins.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Native</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/mobile@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>SSR-safe access to Capacitor plugins from WRNexusJS browser code.</blockquote>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/mobile</code> keeps optional native imports out of server rendering while giving browser-owned modules one consistent registry for Capacitor plugins. During SSR, <code>mobile.isNative()</code> is <code>false</code> and <code>mobile.platform()</code> is <code>&quot;web&quot;</code>.</p>
 <p>Install a plugin through the WRNexusJS CLI so the web and native projects stay aligned:</p>
@@ -131,7 +131,7 @@ const network = mobile.plugin&lt;NetworkPlugin&gt;(&quot;Network&quot;);
 const status = network ? await network.getStatus() : &#123; connected: true, connectionType: &quot;unknown&quot; &#125;;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#register-and-invoke-a-capacitor-plugin">Register and invoke a Capacitor plugin</a><a class="toc-level-4" href="#provide-a-browser-fallback">Provide a browser fallback</a><a class="toc-level-4" href="#read-an-optional-plugin-without-throwing">Read an optional plugin without throwing</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/native.wrn b/app/pages/packages/native.wrn
index d2f35e4b..83b8390d 100644
--- a/app/pages/packages/native.wrn
+++ b/app/pages/packages/native.wrn
@@ -10,11 +10,11 @@ page wrnexusnative {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/native</span></nav><section class="doc-intro"><span class="eyebrow">Native · Package reference</span><h1>@wrnexus/native</h1><p>Cross-platform browser and Capacitor capability registry.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Native</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/native@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Cross-platform capabilities for browsers, Capacitor WebViews, and compiled native apps.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/native</span></nav><section class="doc-intro"><span class="eyebrow">Native · Package reference</span><h1>@wrnexus/native</h1><p>Cross-platform browser and Capacitor capability registry.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Native</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/native@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Cross-platform capabilities for browsers, Capacitor WebViews, and compiled native apps.</blockquote>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/native</code> exposes capabilities by name so application code can ask what the current platform supports before presenting an action. Browser capabilities use Web APIs; mobile capabilities use installed Capacitor plugins. <code>platform()</code> returns <code>&quot;server&quot;</code> during SSR, <code>&quot;browser&quot;</code> on the web, and the Capacitor platform in a native WebView.</p>
 <pre data-language="bash"><code>bun add @wrnexus/native</code></pre>
@@ -123,7 +123,7 @@ const position = await native.run(
 );</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#share-a-page-when-the-platform-supports-it">Share a page when the platform supports it</a><a class="toc-level-4" href="#register-an-application-specific-capability">Register an application-specific capability</a><a class="toc-level-4" href="#target-browser-or-mobile-behavior-explicitly">Target browser or mobile behavior explicitly</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/oauth.wrn b/app/pages/packages/oauth.wrn
index 7c4fcc7c..914c30ce 100644
--- a/app/pages/packages/oauth.wrn
+++ b/app/pages/packages/oauth.wrn
@@ -10,11 +10,11 @@ page wrnexusoauth {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/oauth</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/oauth</h1><p>OAuth 2.0, PKCE, provider presets, and profile mapping.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/oauth@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free OAuth 2.0 sign-in for any provider, with PKCE and presets for Google, GitHub, and Discord.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/oauth</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/oauth</h1><p>OAuth 2.0, PKCE, provider presets, and profile mapping.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/oauth@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free OAuth 2.0 sign-in for any provider, with PKCE and presets for Google, GitHub, and Discord.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/oauth</code> implements the OAuth 2.0 Authorization Code flow (with PKCE) for server-side sign-in. It ships ready-made provider presets and a <code>defineProvider</code> helper for custom providers, then gives you two flow functions — <code>startAuth</code> (build the redirect) and <code>completeAuth</code> (exchange the code and fetch the user's profile). It has no runtime dependencies: it uses the platform <code>fetch</code> and WebCrypto only. Pairs naturally with <code>@wrnexus/core</code>'s <code>logIn</code> to establish a session once you have a normalized profile.</p>
@@ -286,7 +286,7 @@ const gitlab = defineProvider(&#123;
 &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#providers">Providers</a><a class="toc-level-4" href="#flow">Flow</a><a class="toc-level-4" href="#startauth-provider-options-promise-startauthresult">startAuth(provider, options): Promise&lt;StartAuthResult&gt;</a><a class="toc-level-4" href="#completeauth-provider-options-promise-tokens-profile">completeAuth(provider, options): Promise&lt;&#123; tokens, profile &#125;&gt;</a><a class="toc-level-4" href="#lower-level-helpers">Lower-level helpers</a><a class="toc-level-4" href="#types">Types</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/pubsub.wrn b/app/pages/packages/pubsub.wrn
index 78b309ef..c30ef299 100644
--- a/app/pages/packages/pubsub.wrn
+++ b/app/pages/packages/pubsub.wrn
@@ -10,11 +10,11 @@ page wrnexuspubsub {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/pubsub</span></nav><section class="doc-intro"><span class="eyebrow">Realtime · Package reference</span><h1>@wrnexus/pubsub</h1><p>In-process and Redis-backed publish/subscribe.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Realtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/pubsub@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Topic-based publish/subscribe with a pluggable driver — in-process by default, Redis for cross-process messaging.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/pubsub</span></nav><section class="doc-intro"><span class="eyebrow">Realtime · Package reference</span><h1>@wrnexus/pubsub</h1><p>In-process and Redis-backed publish/subscribe.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Realtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/pubsub@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Topic-based publish/subscribe with a pluggable driver — in-process by default, Redis for cross-process messaging.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/pubsub</code> is a small server-side pub/sub bus. You publish messages to a topic and subscribe with topic patterns; handlers fire for matching topics. The default driver keeps everything in-process, and you can swap in the Redis driver (<code>@wrnexus/pubsub/redis</code>) to fan messages out across processes or hosts. It also backs <code>@wrnexus/core</code>'s realtime bridge for horizontal scaling.</p>
@@ -146,7 +146,7 @@ await bus.publish(&quot;order:created&quot;, &#123; id: 7 &#125;);
 driver.close();</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#createpubsub-driver-pubsub">createPubSub(driver?): PubSub</a><a class="toc-level-4" href="#pattern-matching">Pattern matching</a><a class="toc-level-4" href="#memorydriver-pubsubdriver">memoryDriver(): PubSubDriver</a><a class="toc-level-4" href="#wrnexus-pubsub-redis-redisdriver-url">@wrnexus/pubsub/redis — redisDriver(url?)</a><a class="toc-level-4" href="#resp-codec-internal">RESP codec (internal)</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/queue.wrn b/app/pages/packages/queue.wrn
index f5769f0d..03d32e22 100644
--- a/app/pages/packages/queue.wrn
+++ b/app/pages/packages/queue.wrn
@@ -10,11 +10,11 @@ page wrnexusqueue {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/queue</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/queue</h1><p>Background jobs with delay, concurrency, retry, and repetition.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/queue@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>A background job queue with delays, retries + exponential backoff, recurring jobs, and concurrent workers.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/queue</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/queue</h1><p>Background jobs with delay, concurrency, retry, and repetition.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/queue@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>A background job queue with delays, retries + exponential backoff, recurring jobs, and concurrent workers.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/queue</code> is a server-side in-process job queue. You register named workers, enqueue jobs (optionally delayed or recurring), and let the queue poll and run them on a timer — with per-job retry limits and doubling backoff between attempts. The default store lives in memory; the design allows a pluggable driver to back it with Redis/SQL for durability across restarts. Reach for it when you need to defer work (emails, webhooks, cleanup) off the request path without a heavyweight external broker. Tests can drive it deterministically via <code>drain()</code>.</p>
@@ -217,7 +217,7 @@ clock = 5000;
 const ran = await queue.drain(); // =&gt; 1</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#createqueue-options-queue">createQueue(options?): Queue</a><a class="toc-level-4" href="#queueoptions">QueueOptions</a><a class="toc-level-4" href="#queue">Queue</a><a class="toc-level-4" href="#addoptions">AddOptions</a><a class="toc-level-4" href="#jobhandler-t">JobHandler&lt;T&gt;</a><a class="toc-level-4" href="#job-t">Job&lt;T&gt;</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#recurring-jobs">Recurring jobs</a><a class="toc-level-4" href="#handling-permanent-failures">Handling permanent failures</a><a class="toc-level-4" href="#deterministic-testing">Deterministic testing</a><a class="toc-level-3" href="#retry-backoff-behavior">Retry &amp; backoff behavior</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/reactive.wrn b/app/pages/packages/reactive.wrn
index e38c319b..87790c4c 100644
--- a/app/pages/packages/reactive.wrn
+++ b/app/pages/packages/reactive.wrn
@@ -10,11 +10,11 @@ page wrnexusreactive {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/reactive</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/reactive</h1><p>Small type-safe reactive signal primitives.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/reactive@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Tiny, type-safe reactive primitives (signals) with zero dependencies.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/reactive</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/reactive</h1><p>Small type-safe reactive signal primitives.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/reactive@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Tiny, type-safe reactive primitives (signals) with zero dependencies.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/reactive</code> is the seed of WRNexusJS's reactivity layer: a minimal <code>signal</code> primitive that holds a value, notifies subscribers when it changes, and hands back an unsubscribe function. It is deliberately small and framework-agnostic — it powers nothing on its own, but is shaped so client islands (and later the <code>.wrn</code> compiler's <code>state</code> blocks) can build reactive bindings on top of it. Reach for it when you need observable state without pulling in a full reactivity library.</p>
@@ -128,7 +128,7 @@ const user: Signal&lt;&#123; name: string &#125; | null&gt; = signal(null);
 user.set(&#123; name: &quot;Ada&quot; &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#signal-t-initial-t-signal-t">signal&lt;T&gt;(initial: T): Signal&lt;T&gt;</a><a class="toc-level-4" href="#types">Types</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/router.wrn b/app/pages/packages/router.wrn
index b6aaab1e..27b9cc68 100644
--- a/app/pages/packages/router.wrn
+++ b/app/pages/packages/router.wrn
@@ -10,11 +10,11 @@ page wrnexusrouter {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/router</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/router</h1><p>Filesystem discovery, route matching, and typed route generation.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/router@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>File-based router that maps an <code>app/</code> directory onto route tables and matches request paths against them.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/router</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/router</h1><p>Filesystem discovery, route matching, and typed route generation.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/router@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>File-based router that maps an <code>app/</code> directory onto route tables and matches request paths against them.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/router</code> scans an application's <code>app/</code> directory once at startup and builds route tables for pages, API endpoints, realtime channels, middleware, server-rendered <code>.wrn</code> components, layouts, and validation schemas. It also compiles URL patterns (<code>/users/[id]</code>) into RegExps and matches request paths against them. Request input is never turned into a file path, which makes the router immune to path traversal. This is a server-side package used by the WRNexusJS runtime to resolve incoming requests, plus a codegen helper for compile-time typed links.</p>
@@ -273,7 +273,7 @@ const routes = sortRoutes([&#123; raw: &quot;/posts/[slug]&quot;, file: &quot;
 const m = matchRoute(routes, &quot;/posts/hello&quot;); // &#123; route, params: &#123; slug: &quot;hello&quot; &#125; &#125;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#directory-conventions">Directory conventions</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#buildrouter-appdir-opts-router">buildRouter(appDir, opts?): Router</a><a class="toc-level-4" href="#route-matching">Route matching</a><a class="toc-level-4" href="#typed-routes-codegen">Typed-routes codegen</a><a class="toc-level-4" href="#re-exports">Re-exports</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/ssr.wrn b/app/pages/packages/ssr.wrn
index e8931c8a..828683b2 100644
--- a/app/pages/packages/ssr.wrn
+++ b/app/pages/packages/ssr.wrn
@@ -10,11 +10,11 @@ page wrnexusssr {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ssr</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/ssr</h1><p>Secure HTML document rendering and SEO metadata.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ssr@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <code>&lt;head&gt;</code>.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ssr</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/ssr</h1><p>Secure HTML document rendering and SEO metadata.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ssr@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <code>&lt;head&gt;</code>.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>Pages in WRNexusJS return an HTML string for the body. <code>@wrnexus/ssr</code> takes that body and produces a full HTML document — building the <code>&lt;head&gt;</code> from page metadata and global SEO defaults, resolving canonical/Open Graph/Twitter tags, and injecting module preloads and <code>&lt;script type=&quot;module&quot;&gt;</code> tags. It is deliberately server-only: nothing in this package touches the DOM or ships to the browser, keeping server code genuinely server-only. Reach for it on the server when turning a rendered page body into a response document.</p>
@@ -128,6 +128,12 @@ interface RenderOptions &#123;
     extraBody?: string;
     /** Attributes for the `&lt;html&gt;` element, e.g. ` data-theme=&quot;dark&quot;` (trusted). */
     htmlAttrs?: string;
+    /**
+     * Optional application-authored full document shell. It must contain
+     * `&lt;html&gt;`, `&lt;head&gt;`, and `&lt;body&gt;`. Framework metadata, assets, and scripts
+     * are merged into it instead of wrapping the rendered body again.
+     */
+    documentTemplate?: string;
 &#125;
 /**
  * Render a complete HTML document.
@@ -180,7 +186,7 @@ return new Response(html, &#123;
 return new Response(html, &#123; headers: &#123; &quot;content-type&quot;: &quot;text/html; charset=utf-8&quot; &#125; &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#renderdocument-opts-renderoptions-string">renderDocument(opts: RenderOptions): string</a><a class="toc-level-4" href="#renderoptions">RenderOptions</a><a class="toc-level-4" href="#metadata-resolution">Metadata resolution</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#render-an-seo-ready-application-page">Render an SEO-ready application page</a><a class="toc-level-4" href="#add-trusted-framework-assets-and-boot-data">Add trusted framework assets and boot data</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/styles.wrn b/app/pages/packages/styles.wrn
index d7e26f4e..ef12e2ad 100644
--- a/app/pages/packages/styles.wrn
+++ b/app/pages/packages/styles.wrn
@@ -10,11 +10,11 @@ page wrnexusstyles {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/styles</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/styles</h1><p>CSS pipeline, themes, fonts, profiles, and application config.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/styles@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Global CSS bundling, the <code>--wire-*</code> design-token theme system, and the <code>wrnexus.config.ts</code> app-config loader for WRNexusJS apps.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/styles</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/styles</h1><p>CSS pipeline, themes, fonts, profiles, and application config.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/styles@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Global CSS bundling, the <code>--wire-*</code> design-token theme system, and the <code>wrnexus.config.ts</code> app-config loader for WRNexusJS apps.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>This package owns three server-side concerns that shape every page a WRNexusJS app renders:</p>
@@ -697,7 +697,7 @@ const themeJs = renderThemeRuntime(theme); // served at THEME_JS_HREF</code></pr
 &lt;button data-wire-theme-set=&quot;brand&quot;&gt;Brand theme&lt;/button&gt;</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#config-loading">Config loading</a><a class="toc-level-4" href="#appconfig">AppConfig</a><a class="toc-level-4" href="#styles-pipeline">Styles pipeline</a><a class="toc-level-4" href="#theme-system">Theme system</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#wrnexus-config-ts">wrnexus.config.ts</a><a class="toc-level-4" href="#loading-config-producing-css">Loading config + producing CSS</a><a class="toc-level-4" href="#rendering-the-theme">Rendering the theme</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/test.wrn b/app/pages/packages/test.wrn
index 2aff1216..532f638a 100644
--- a/app/pages/packages/test.wrn
+++ b/app/pages/packages/test.wrn
@@ -10,11 +10,11 @@ page wrnexustest {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/test</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/test</h1><p>WRNexusJS-aware component, route, and browser testing utilities.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/test@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Testing utilities for WRNexusJS apps — component rendering, reactive-DOM mounting, route handler calls, and a full in-process app harness, plus a one-import re-export of <code>bun:test</code>.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/test</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/test</h1><p>WRNexusJS-aware component, route, and browser testing utilities.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/test@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Testing utilities for WRNexusJS apps — component rendering, reactive-DOM mounting, route handler calls, and a full in-process app harness, plus a one-import re-export of <code>bun:test</code>.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/test</code> is the server-side test toolkit you reach for when writing tests for a WRNexusJS app. It runs under <code>bun test</code> (invoked via <code>wrnexus test</code>) and gives you a single import surface: the <code>bun:test</code> primitives (<code>test</code>, <code>expect</code>, <code>mock</code>, …) re-exported alongside WRNexusJS-aware helpers that compile <code>.wrn</code> components, hydrate server HTML in a DOM, invoke API route handlers, and boot the real app on an ephemeral port for integration tests.</p>
@@ -185,7 +185,7 @@ test(&quot;health endpoint&quot;, async () =&gt; &#123;
 &#125;);</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#re-exported-test-primitives">Re-exported test primitives</a><a class="toc-level-4" href="#rendercomponent-source-props">renderComponent(source, props?)</a><a class="toc-level-4" href="#mounthtml-html">mountHtml(html)</a><a class="toc-level-4" href="#callroute-handler-request">callRoute(handler, request)</a><a class="toc-level-4" href="#createharness-projectroot-options">createHarness(projectRoot, options?)</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/tracking.wrn b/app/pages/packages/tracking.wrn
index 928e04e4..8915e214 100644
--- a/app/pages/packages/tracking.wrn
+++ b/app/pages/packages/tracking.wrn
@@ -10,11 +10,11 @@ page wrnexustracking {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/tracking</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/tracking</h1><p>Error/event capture, middleware, filtering, and sinks.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/tracking@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Error tracking for WRNexusJS apps: capture exceptions manually or via middleware and fan them out to pluggable sinks.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/tracking</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/tracking</h1><p>Error/event capture, middleware, filtering, and sinks.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/tracking@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Error tracking for WRNexusJS apps: capture exceptions manually or via middleware and fan them out to pluggable sinks.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/tracking</code> is a small, server-side error-capture layer. You create a tracker with one or more <strong>sinks</strong>, then feed it errors — either manually with <code>tracker.capture(err, context)</code> or automatically by mounting <code>tracker.middleware()</code> in your request pipeline. A <code>consoleSink</code> is included; forwarding to Sentry, Datadog, or any other backend is just a matter of writing a tiny sink. Reach for it when you want a single, sink-agnostic place to route application errors. Sinks run best-effort — a throwing sink never breaks the request.</p>
@@ -163,7 +163,7 @@ const tracker = createTracker(&#123;
 tracker.addSink(anotherSink); // add more sinks later</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#createtracker-options-tracker">createTracker(options?): Tracker</a><a class="toc-level-4" href="#consolesink-errorsink">consoleSink: ErrorSink</a><a class="toc-level-4" href="#types">Types</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/ui.wrn b/app/pages/packages/ui.wrn
index c06556fc..e438c10e 100644
--- a/app/pages/packages/ui.wrn
+++ b/app/pages/packages/ui.wrn
@@ -10,11 +10,11 @@ page wrnexusui {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ui</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/ui</h1><p>Themeable server-rendered UI components and CSS.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ui@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>First-party Wire UI component library — a set of themeable <code>.wrn</code> components plus a single tokenized stylesheet.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ui</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/ui</h1><p>Themeable server-rendered UI components and CSS.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ui@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>First-party Wire UI component library — a set of themeable <code>.wrn</code> components plus a single tokenized stylesheet.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/ui</code> ships a library of server-rendered <code>.wrn</code> components (layout, form controls, and feedback UI) together with one themeable stylesheet, <code>ui.css</code>. The components are <strong>auto-discovered</strong> by the framework router — you don't import them in code. Once the package's component directory is on the router's scan path, you mount any component in a page with <code>data-component=&quot;&lt;name&gt;&quot;</code>. Every visual is driven by <code>var(--wire-*)</code> theme tokens, so components restyle instantly when the theme changes. The tiny JS surface (<code>src/index.ts</code>) exists only so the toolchain (CLI build + dev server) can locate the component directory and stylesheet.</p>
@@ -128,10 +128,10 @@ const router = buildRouter(appDir, &#123; componentDirs: [uiComponentsDir()] &#1
   &lt;div data-component=&quot;badge&quot; label=&quot;New&quot;&gt;&lt;/div&gt;
   &lt;button data-component=&quot;button&quot; label=&quot;Save&quot; variant=&quot;primary&quot; size=&quot;lg&quot;&gt;&lt;/button&gt;
   &lt;div data-component=&quot;alert&quot; variant=&quot;success&quot; title=&quot;Done&quot; message=&quot;Saved.&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;</code></pre></article></div></section><section class="prose component-catalog-callout"><h2>Explore the component library</h2><p>The component reference now has a dedicated catalog with searchable cards and one complete page per component.</p><p><a class="primary" href="/components">Browse all 902 components →</a></p></section></article>
+&lt;/div&gt;</code></pre></article></div></section><section class="prose component-catalog-callout"><h2>Explore the component library</h2><p>The component reference now has a dedicated catalog with searchable cards and one complete page per component.</p><p><a class="primary" href="/components">Browse all 85 components →</a></p></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#components">Components</a><a class="toc-level-4" href="#layout">Layout</a><a class="toc-level-4" href="#core-feedback">Core / feedback</a><a class="toc-level-4" href="#additional-controls-data-display">Additional controls &amp; data display</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#ui-css-asset-export">./ui.css asset export</a><a class="toc-level-4" href="#tailwind-and-motion">Tailwind and motion</a><a class="toc-level-4" href="#using-the-selected-theme-in-application-ui">Using the selected theme in application UI</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#auto-discovery">Auto-discovery</a><a class="toc-level-4" href="#mounting-components-in-a-page">Mounting components in a page</a><a class="toc-level-3" href="#overrides">Overrides</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/uploader.wrn b/app/pages/packages/uploader.wrn
index 8f0f8222..540cb2e5 100644
--- a/app/pages/packages/uploader.wrn
+++ b/app/pages/packages/uploader.wrn
@@ -10,11 +10,11 @@ page wrnexusuploader {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/uploader</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/uploader</h1><p>Validated local/S3 uploads and secure file serving.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/uploader@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><p>Config-driven file uploads + serving for <a href="https://www.npmjs.com/org/wrnexus" rel="noreferrer">WRNexusJS</a>. Declare named <strong>storage stores</strong> (local disk or any S3-compatible backend) in <code>wrnexus.config.ts</code>, upload with one function call, drop a drag-and-drop widget on a page, and serve files back — public or private. Zero external dependencies (S3 is signed with a built-in AWS SigV4 implementation, like the rest of the framework).</p>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/uploader</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/uploader</h1><p>Validated local/S3 uploads and secure file serving.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/uploader@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><p>Config-driven file uploads + serving for <a href="https://www.npmjs.com/org/wrnexus" rel="noreferrer">WRNexusJS</a>. Declare named <strong>storage stores</strong> (local disk or any S3-compatible backend) in <code>wrnexus.config.ts</code>, upload with one function call, drop a drag-and-drop widget on a page, and serve files back — public or private. Zero external dependencies (S3 is signed with a built-in AWS SigV4 implementation, like the rest of the framework).</p>
 <h3 id="usage">Usage</h3>
 <h4 id="configure-local-and-s3-stores">Configure local and S3 stores</h4>
 <pre data-language="ts"><code>// wrnexus.config.ts
@@ -423,7 +423,7 @@ import &#123; serveFromStore &#125; from &quot;@wrnexus/uploader&quot;;
 export const GET = serveFromStore(&quot;docs&quot;); // your middleware decides who gets in</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#configure-local-and-s3-stores">Configure local and S3 stores</a><a class="toc-level-4" href="#upload-from-an-api-route-or-server-function">Upload from an API route or server function</a><a class="toc-level-4" href="#add-a-client-upload-widget">Add a client upload widget</a><a class="toc-level-4" href="#serve-private-files-behind-application-authentication">Serve private files behind application authentication</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-3" href="#notes">Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/app/pages/packages/validation.wrn b/app/pages/packages/validation.wrn
index 433edbc1..352046a0 100644
--- a/app/pages/packages/validation.wrn
+++ b/app/pages/packages/validation.wrn
@@ -10,11 +10,11 @@ page wrnexusvalidation {
       <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.4</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.3.5</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">
-      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/validation</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/validation</h1><p>Typed schemas, coercion, validation, and browser descriptors.</p><div class="doc-meta"><span>v0.3.4</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/validation@0.3.4</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>One fluent schema, validated on the server (API bodies, env vars) and mirrored to an eval-free browser validator for forms.</blockquote>
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/validation</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/validation</h1><p>Typed schemas, coercion, validation, and browser descriptors.</p><div class="doc-meta"><span>v0.3.5</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/validation@0.3.5</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>One fluent schema, validated on the server (API bodies, env vars) and mirrored to an eval-free browser validator for forms.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>Define a schema once with the fluent <code>v</code> builder, then reuse it in three places: <code>.parse()</code> runs server-side and returns coerced values plus per-field errors; <code>.describe()</code> emits a plain-JSON <code>SchemaDescriptor</code> that the browser runtime interprets (no <code>eval</code>, no bundled validator); and helpers like <code>parseBody</code> and <code>parseEnv</code> wire schemas straight into API routes and startup config. The server rule logic (<code>applyRule</code>/<code>checkField</code>) and the client runtime (<code>VALIDATE_RUNTIME</code>) mirror each other exactly, so a form validates identically in both places. Schemas are conventionally kept in <code>app/schemas/</code>.</p>
@@ -343,7 +343,7 @@ const head = `&lt;script&gt;$&#123;renderSchemasScript(&#123; signup: signupSche
 // render a &lt;form data-schema=&quot;signup&quot;&gt; with [data-error=&quot;email&quot;] etc.</code></pre></article></div></section></article>
       <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#the-v-builder">The v builder</a><a class="toc-level-4" href="#objectschema">ObjectSchema</a><a class="toc-level-4" href="#rules-and-coercion">Rules and coercion</a><a class="toc-level-4" href="#api-helpers">API helpers</a><a class="toc-level-4" href="#environment-config">Environment config</a><a class="toc-level-4" href="#client-runtime-from-runtime-ts">Client runtime (from runtime.ts)</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.4</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.3.5</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>
   }
diff --git a/bun.lock b/bun.lock
index b309c595..db325166 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,41 +7,41 @@
       "dependencies": {
         "@iconify-json/lucide": "^1.2.118",
         "@iconify/tailwind4": "^1.2.3",
-        "@wrnexus/ai": "^0.3.4",
-        "@wrnexus/authz": "^0.3.4",
-        "@wrnexus/compiler": "^0.3.4",
-        "@wrnexus/core": "^0.3.4",
-        "@wrnexus/csr": "^0.3.4",
-        "@wrnexus/db": "^0.3.4",
-        "@wrnexus/dev-server": "^0.3.4",
-        "@wrnexus/dev-toolbar": "^0.3.4",
-        "@wrnexus/encryption": "^0.3.4",
-        "@wrnexus/helpers": "^0.3.4",
-        "@wrnexus/i18n": "^0.3.4",
-        "@wrnexus/jwt": "^0.3.4",
-        "@wrnexus/mobile": "^0.3.4",
-        "@wrnexus/native": "^0.3.4",
-        "@wrnexus/oauth": "^0.3.4",
-        "@wrnexus/plugin": "^0.3.4",
-        "@wrnexus/pubsub": "^0.3.4",
-        "@wrnexus/queue": "^0.3.4",
-        "@wrnexus/reactive": "^0.3.4",
-        "@wrnexus/router": "^0.3.4",
-        "@wrnexus/ssr": "^0.3.4",
-        "@wrnexus/styles": "^0.3.4",
-        "@wrnexus/syntax": "^0.3.4",
-        "@wrnexus/test": "^0.3.4",
-        "@wrnexus/tracking": "^0.3.4",
-        "@wrnexus/ui": "^0.3.4",
-        "@wrnexus/uploader": "^0.3.4",
-        "@wrnexus/validation": "^0.3.4",
+        "@wrnexus/ai": "^0.3.5",
+        "@wrnexus/authz": "^0.3.5",
+        "@wrnexus/compiler": "^0.3.5",
+        "@wrnexus/core": "^0.3.5",
+        "@wrnexus/csr": "^0.3.5",
+        "@wrnexus/db": "^0.3.5",
+        "@wrnexus/dev-server": "^0.3.5",
+        "@wrnexus/dev-toolbar": "^0.3.5",
+        "@wrnexus/encryption": "^0.3.5",
+        "@wrnexus/helpers": "^0.3.5",
+        "@wrnexus/i18n": "^0.3.5",
+        "@wrnexus/jwt": "^0.3.5",
+        "@wrnexus/mobile": "^0.3.5",
+        "@wrnexus/native": "^0.3.5",
+        "@wrnexus/oauth": "^0.3.5",
+        "@wrnexus/plugin": "^0.3.5",
+        "@wrnexus/pubsub": "^0.3.5",
+        "@wrnexus/queue": "^0.3.5",
+        "@wrnexus/reactive": "^0.3.5",
+        "@wrnexus/router": "^0.3.5",
+        "@wrnexus/ssr": "^0.3.5",
+        "@wrnexus/styles": "^0.3.5",
+        "@wrnexus/syntax": "^0.3.5",
+        "@wrnexus/test": "^0.3.5",
+        "@wrnexus/tracking": "^0.3.5",
+        "@wrnexus/ui": "^0.3.5",
+        "@wrnexus/uploader": "^0.3.5",
+        "@wrnexus/validation": "^0.3.5",
       },
       "devDependencies": {
         "@eslint/js": "^9.0.0",
         "@tailwindcss/cli": "^4.0.0",
         "@types/bun": "latest",
         "@types/node": "^26.1.1",
-        "@wrnexus/cli": "^0.3.4",
+        "@wrnexus/cli": "^0.3.5",
         "eslint": "^9.0.0",
         "prettier": "latest",
         "tailwindcss": "^4.0.0",
@@ -189,63 +189,63 @@
 
     "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw=="],
 
-    "@wrnexus/ai": ["@wrnexus/ai@0.3.4", "", {}, "sha512-Ll6fIKijL/IMKEDjIvi9KVXKjJblFPTaTEKHRuzQVI9r3zM1eYym6a+R2WhsCzda6yi2LkqnYuB1MWysmNuwIA=="],
+    "@wrnexus/ai": ["@wrnexus/ai@0.3.5", "", {}, "sha512-St3/Fr8O1BFWnzLdp5TynSANYzFxYv1pGIzz2mRZ4SUIIWM96q3kvLUdWNX9bLj2wEQDJjA8E3QmadV0D0PK3Q=="],
 
-    "@wrnexus/authz": ["@wrnexus/authz@0.3.4", "", {}, "sha512-nngnGOB6hHWf32oGPAl5q81GeycrsqA7y+sC+PsqctY/dcbsSkIVJjq/8Z4uryC4mWYYNpqSfFD7GJa7a4a5hA=="],
+    "@wrnexus/authz": ["@wrnexus/authz@0.3.5", "", {}, "sha512-l1uz850agaFSWcLXilomSbT6sZXWl2qJtjfRlxeg58uv2rrfYFDJJXqT01Nrb3yg5HuJtenENBsBQOTS6mtRwA=="],
 
-    "@wrnexus/cli": ["@wrnexus/cli@0.3.4", "", { "dependencies": { "@wrnexus/compiler": "^0.3.4", "@wrnexus/core": "^0.3.4", "@wrnexus/csr": "^0.3.4", "@wrnexus/db": "^0.3.4", "@wrnexus/dev-server": "^0.3.4", "@wrnexus/i18n": "^0.3.4", "@wrnexus/plugin": "^0.3.4", "@wrnexus/router": "^0.3.4", "@wrnexus/styles": "^0.3.4", "@wrnexus/syntax": "^0.3.4", "@wrnexus/ui": "^0.3.4", "@wrnexus/validation": "^0.3.4" }, "bin": { "wrnexus": "dist/index.js" } }, "sha512-Eov9ScHTcGjBhOBAsQvdBRu5Dd9zyFOqQW3DO2wjExS71hVWbPQL6BjNJqcQSwgVh4sOaXnl2zhf8iQ+XAK31Q=="],
+    "@wrnexus/cli": ["@wrnexus/cli@0.3.5", "", { "dependencies": { "@wrnexus/compiler": "^0.3.5", "@wrnexus/core": "^0.3.5", "@wrnexus/csr": "^0.3.5", "@wrnexus/db": "^0.3.5", "@wrnexus/dev-server": "^0.3.5", "@wrnexus/i18n": "^0.3.5", "@wrnexus/plugin": "^0.3.5", "@wrnexus/router": "^0.3.5", "@wrnexus/styles": "^0.3.5", "@wrnexus/syntax": "^0.3.5", "@wrnexus/ui": "^0.3.5", "@wrnexus/validation": "^0.3.5" }, "bin": { "wrnexus": "dist/index.js" } }, "sha512-MbPiHIgxjQejyHlBHuLnjSW3G7EFdF9J0hONu7Ispj3e4whTya7sXvWSuV4YbS0QG9jgKH1QOuC40SjQttT05g=="],
 
-    "@wrnexus/compiler": ["@wrnexus/compiler@0.3.4", "", { "dependencies": { "@wrnexus/syntax": "^0.3.4" } }, "sha512-jcVbA1349RQ+/BLOGmmZ8fjdsGrFGs/8X+raSdhea9RIKLqDFMrloJ/p/MVLZfYLYOREt4ZxguWN6AVNxDf64g=="],
+    "@wrnexus/compiler": ["@wrnexus/compiler@0.3.5", "", { "dependencies": { "@wrnexus/syntax": "^0.3.5" } }, "sha512-X295aKswQEJOMsdPFbjyWqW7gMHiIi9OYmYwvpKtWIANI4ETRQ5Omp2X2rZO07bYyY5S6jKOlrTrqK2Xq/DfFg=="],
 
-    "@wrnexus/core": ["@wrnexus/core@0.3.4", "", {}, "sha512-Ug0M2aDjaqcjjfmGitApaQYLHqbLQ9K8VFNfXuU+fL/qisyW3iN7AHCqxqfBW4uNyQvtNavbNN9d/iCZAi0pFQ=="],
+    "@wrnexus/core": ["@wrnexus/core@0.3.5", "", {}, "sha512-XqdeY1kM7jV5LcD+YxeFMazaynpk0DrC7F8Qt+hij18q6z9pBUilYnHBTI9R5qRtzqSW2r774bJ5tN6QvMnvVg=="],
 
-    "@wrnexus/csr": ["@wrnexus/csr@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-6zjK2usMWD2psI19kLaEdmOAOTPFQFi0TF01gd0JkBi3FphXbi+mIrzEplMyVQN1U3jJZpBf2Gto0+V02tCudQ=="],
+    "@wrnexus/csr": ["@wrnexus/csr@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5" } }, "sha512-Rv1RVsW59AMfyfEMuBoIQSCXPIjYrcVOYSwmrPJDV7o6IK8z6w2MnnZoiBjnyRhMbVOy1+i6uVn9Lf+4vuorlg=="],
 
-    "@wrnexus/db": ["@wrnexus/db@0.3.4", "", {}, "sha512-txcjaw3wGckNBW8Zsn4lS46el0+ntZQcbdiR3avOyXXrq0fKau0Sk23fgCP/v0EtNMJc0J2bQUypU1phUuFFcg=="],
+    "@wrnexus/db": ["@wrnexus/db@0.3.5", "", {}, "sha512-qD5HpAHssQfZYYy/VUps0cfg5/iXk9G4LMiN0ALVp6irUVBmWkn0ORZvigGsI507suumnvfBy/pAPulFPMRcaw=="],
 
-    "@wrnexus/dev-server": ["@wrnexus/dev-server@0.3.4", "", { "dependencies": { "@wrnexus/compiler": "^0.3.4", "@wrnexus/core": "^0.3.4", "@wrnexus/csr": "^0.3.4", "@wrnexus/db": "^0.3.4", "@wrnexus/dev-toolbar": "^0.3.4", "@wrnexus/i18n": "^0.3.4", "@wrnexus/plugin": "^0.3.4", "@wrnexus/pubsub": "^0.3.4", "@wrnexus/router": "^0.3.4", "@wrnexus/ssr": "^0.3.4", "@wrnexus/styles": "^0.3.4", "@wrnexus/ui": "^0.3.4", "@wrnexus/uploader": "^0.3.4", "@wrnexus/validation": "^0.3.4" } }, "sha512-oPNnqalMAN8Uu5WPJgVeoDo5zo4qPi6t73scIgZ8WErtRYhqc2pRaH5EVAOppL5B50NFr5VUeptqgOKp5T20Eg=="],
+    "@wrnexus/dev-server": ["@wrnexus/dev-server@0.3.5", "", { "dependencies": { "@wrnexus/compiler": "^0.3.5", "@wrnexus/core": "^0.3.5", "@wrnexus/csr": "^0.3.5", "@wrnexus/db": "^0.3.5", "@wrnexus/dev-toolbar": "^0.3.5", "@wrnexus/i18n": "^0.3.5", "@wrnexus/plugin": "^0.3.5", "@wrnexus/pubsub": "^0.3.5", "@wrnexus/router": "^0.3.5", "@wrnexus/ssr": "^0.3.5", "@wrnexus/styles": "^0.3.5", "@wrnexus/ui": "^0.3.5", "@wrnexus/uploader": "^0.3.5", "@wrnexus/validation": "^0.3.5" } }, "sha512-Gbgo4aPZHtEbuZpFQYUxZpT9HvcyRnnW0la5iYRrbSQ9VIYNR/NqQRG0//nA9fA9k+jF+1OgV2jkEzugsniGSw=="],
 
-    "@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.3.4", "", {}, "sha512-LCHpKS3z8rDiJ375wGyxltg5rzB8dt70dDlUZGoZWgzBv9lSsl0yLR0l1bOFeGsgtz1tMza5ngXafsk/CDjs4w=="],
+    "@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.3.5", "", {}, "sha512-1TxY5b02B+EbErbH7H6UP9oVtR9CYdrVEEftoSs4Q1h2nNwHrjxd/48iL0qvFQCdT0fGyDK499g44MydRqJHNw=="],
 
-    "@wrnexus/encryption": ["@wrnexus/encryption@0.3.4", "", {}, "sha512-y0jzdE6uVLXIUfxyB+tFz49zNmZcxbr37/1oMH9Uc2Q+Mxl+YcefmTnd+yqN9P2ns8D/VPcfUuZhzpePJE0URQ=="],
+    "@wrnexus/encryption": ["@wrnexus/encryption@0.3.5", "", {}, "sha512-7lM00C+Di8uutcrUqBEEpi1puC2D1WW5v8TwDfuMv/lrYQ5CZ4rArAptysKzsmTnFUm2PY9YmUgJu2uAula8tA=="],
 
-    "@wrnexus/helpers": ["@wrnexus/helpers@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-btniCblXGsSmEcpMkh8AMREBB+nEjmd3Qi/qsvrJWbIWLL0AZCHntXkNOlomhtcKlaUo0P9lOTcqyXnejWA4ig=="],
+    "@wrnexus/helpers": ["@wrnexus/helpers@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5" } }, "sha512-ZjUFfjrYY8/JIgcdkRKHlN0oaffwDFtyFLHTG+rI8JXX9iWyiMMS9+y68Tun1yyoLj4UMa+RuZd8U5FE7JV6OQ=="],
 
-    "@wrnexus/i18n": ["@wrnexus/i18n@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-t3HNlaLW8aRXxgY+suhVk9kwY0fWmNUkHh4o1VnvhgFpPV+kSCDl7as5ug4m5MY0uQ33pW8fqqSTh8NML//2DQ=="],
+    "@wrnexus/i18n": ["@wrnexus/i18n@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5" } }, "sha512-HWXw/PX9reAgfHJjMEKfVjUFmfnvjh7k7y9q+43L7BAuHctb4k12QBbczapZbUa0GrwBA8skyhNxi+pun2vDJQ=="],
 
-    "@wrnexus/jwt": ["@wrnexus/jwt@0.3.4", "", {}, "sha512-fvclwmXamNi5gOf6ETdVUJoLoj6PY+e4rGVwpF1frFTsnFY8/crYA2Cy8GW4cdWhCwy0J1JZBiUwtHs2BMF9gQ=="],
+    "@wrnexus/jwt": ["@wrnexus/jwt@0.3.5", "", {}, "sha512-tELPqg20s+nBNiMP/hzvdzG70E1mN6gjyLzjHgak96sy7kjMgeS4vl9J7VicpMnTowm5nKQIjTLLRXPQQKLcog=="],
 
-    "@wrnexus/mobile": ["@wrnexus/mobile@0.3.4", "", { "dependencies": { "@wrnexus/native": "^0.3.4" } }, "sha512-v0GC5d/2Hptqz7ktbwKSeSeE/ZGYluem45LM2vOD9zahjNe4ZEdwTd8g1xCeDtx9vdkz8OqdNptAmFn0dAoe0A=="],
+    "@wrnexus/mobile": ["@wrnexus/mobile@0.3.5", "", { "dependencies": { "@wrnexus/native": "^0.3.5" } }, "sha512-Q58bw2J56+eZ1TDCiiFaE4/BsjNG/05juFBvrt/DnNi0pLSKPL0TZggeeK4F0z8NWEWZiwwcHS+XqixBb/LytQ=="],
 
-    "@wrnexus/native": ["@wrnexus/native@0.3.4", "", {}, "sha512-Wm6wkDhVBUPDTLB6inh2HCWhW/2zXKddP6+gozgH5nU4SUd6CGS1nr53eP5HPiLaGmtScKbLyuNjf5gkx93i/g=="],
+    "@wrnexus/native": ["@wrnexus/native@0.3.5", "", {}, "sha512-Ze+CJSs04YbBMYRgJ4QnkvThSaz2I0lWeYXGKYqkBLtYs6DKDRJZpHBfu+acTKeQKTxBNxeL0Ye+YjbMG/LVGQ=="],
 
-    "@wrnexus/oauth": ["@wrnexus/oauth@0.3.4", "", {}, "sha512-1FCSKTEljhxYVAMX/hmZIs4Qip9XSd1eGG6Ret2RMKrOGB5yUs6KZxjUjHK1uafUd11XL6yDLuDKJW3Nq7sC1Q=="],
+    "@wrnexus/oauth": ["@wrnexus/oauth@0.3.5", "", {}, "sha512-89TpXiP4dMIF5Wb6TRPHThADRnjTjhhtOckqjQJrNTHWkDuK+YG29G0XrCjxp03Rdw7m1SywOEhL3rcBrTvR2Q=="],
 
-    "@wrnexus/plugin": ["@wrnexus/plugin@0.3.4", "", { "dependencies": { "@wrnexus/syntax": "^0.3.4" } }, "sha512-DQ0d0dAkwKICDQKaUX1Uw6kcr/3pFr69fWDY7sBReTr53O6D0gLbvCIYAR6K5TVili5+oWqa85Yr+0M/CGmCZg=="],
+    "@wrnexus/plugin": ["@wrnexus/plugin@0.3.5", "", { "dependencies": { "@wrnexus/syntax": "^0.3.5" } }, "sha512-kigwQpjCNdKIohfIgNqFLq6MDRfS20Rw5EF0Zaiia+1CodHfKmy33RvmF1xQesY1kOt86OXoSbo4n4jIlv5Kxw=="],
 
-    "@wrnexus/pubsub": ["@wrnexus/pubsub@0.3.4", "", {}, "sha512-0eKJpoQ+Agft2thont0O5zTNhdfOiECP0rZ/+uXfXLcW/pzDJN2gOz8H1BaXjiuhEVMSZ5NB/3d7BiSYF3/zwg=="],
+    "@wrnexus/pubsub": ["@wrnexus/pubsub@0.3.5", "", {}, "sha512-NfMUESzvlKVrEvMHEByDa8HRRr/ofbaaGObvjn3jEoaI/njEN15PXuquNko0FVpd+nW7CHIRDOk7uEsfPYbJKQ=="],
 
-    "@wrnexus/queue": ["@wrnexus/queue@0.3.4", "", {}, "sha512-eT4prWQTr4x2u72uEf5w21Ph5EU4piaqt20i+v0rKT8iTTQ+bB569AaTG4S9JkF+sdmGhgwCs53Sh1WfDcX1pg=="],
+    "@wrnexus/queue": ["@wrnexus/queue@0.3.5", "", {}, "sha512-IzsbmEXgNhIdutwrifi94Az/5gfpPqTvplLVONmCeFwzaMxRNSx5xQlzTjdForitemFaSv851e0Y6zInkdzQgg=="],
 
-    "@wrnexus/reactive": ["@wrnexus/reactive@0.3.4", "", {}, "sha512-1v2f2AVnTq1+UPkkaWbkj0k3/KQmdYfzsRaccYYkduPghqhPqRXRLOfPVS89bHjg6qBwKJtNdyXhlb9/kN/TaA=="],
+    "@wrnexus/reactive": ["@wrnexus/reactive@0.3.5", "", {}, "sha512-D0oVOvYkKSW/bi5UTL6tYczCgrGnpT1kQ6R6rpPcFNHHgwM8p/unkPD0R46sj26lSsk1hka/Cy82EjE3zkwWhA=="],
 
-    "@wrnexus/router": ["@wrnexus/router@0.3.4", "", { "dependencies": { "@wrnexus/compiler": "^0.3.4", "@wrnexus/core": "^0.3.4" } }, "sha512-1JKbcxFsVyKO+JaHTrgIpBwCEQxmBfQufAF73J8Y25M1h0F1yepuFnCln1X7GF8VHWYWYwgQf64yJ0o18QWxjg=="],
+    "@wrnexus/router": ["@wrnexus/router@0.3.5", "", { "dependencies": { "@wrnexus/compiler": "^0.3.5", "@wrnexus/core": "^0.3.5" } }, "sha512-wcJwThYfx2gh4wHmKhuqdzXGDFbqlmDOBXkNpwagiDfI70yYt9QhxQ767J8iknNczofemiCpzszH0eV4Dl2glg=="],
 
-    "@wrnexus/ssr": ["@wrnexus/ssr@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-WFX3LYCl4mQ0+3oRAzRmoeLIpwYHyYDGpLqg/HmxWLbUqvZzqX9jwoWypvcAK7//x8DF/UGV0LbYf/s3ko3gQg=="],
+    "@wrnexus/ssr": ["@wrnexus/ssr@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5" } }, "sha512-xP0oHarZ5BISIJSRhff2tXa5xjn49L9lDotlOUSUJuuUkOC9wPtS44qdJePEZAHipH6BwOxrkbFfQ+WWPC/mkw=="],
 
-    "@wrnexus/styles": ["@wrnexus/styles@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4", "@wrnexus/plugin": "^0.3.4", "@wrnexus/uploader": "^0.3.4" } }, "sha512-w8OjokQEfIrhVrIQsEOhUJJ4XqVLoo7Zz5kJEYox/69LCBXQioRq6UIti7ZNvG0vrQYFE6XCfumvN69A6kMF4g=="],
+    "@wrnexus/styles": ["@wrnexus/styles@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5", "@wrnexus/plugin": "^0.3.5", "@wrnexus/uploader": "^0.3.5" } }, "sha512-ZYjrm2VPwE+mUK7+UsE9gBO6yDpjmSFCMAM8+Jagg2wF6jty+nMnEMv9Lzn0IbXUXFBq7S3/5zDDvZL6ML7BIw=="],
 
-    "@wrnexus/syntax": ["@wrnexus/syntax@0.3.4", "", {}, "sha512-Op0ylbSP1pM0C+T/7eH5Z6P9QXRY4KvbELUwBYbhWhZF1gJAPCWgm+wnUnBN/K/aHqgkMKWda8ojqZ9cDJPRIw=="],
+    "@wrnexus/syntax": ["@wrnexus/syntax@0.3.5", "", {}, "sha512-e0xhqqjW+V/2QiSaICV2dx11qT3FDTNGGSvoxJeZhr67Heh0SHUPxtv9Po8A/bP97gUShjKNCE9bGLHOUPfKnA=="],
 
-    "@wrnexus/test": ["@wrnexus/test@0.3.4", "", {}, "sha512-ZTErOYOEFeRIyJ0q7CX286flSvszMqd0sVz1H8v9bIwEpmknyPD87Hs4yEOnqLT3Pw9BsCvWqri6M8PowguC1g=="],
+    "@wrnexus/test": ["@wrnexus/test@0.3.5", "", {}, "sha512-FN4qINVCO9QKvH0GMECHvIBNtSjIve7c6UJHlY5L/kiC9UXJU4vDgz6fjjp1tNwKoTHVu5RFhhTdh+Hu4Cgc8A=="],
 
-    "@wrnexus/tracking": ["@wrnexus/tracking@0.3.4", "", {}, "sha512-9olQXJVzUvtKsL+oe816qTaA+SbkFAetmx4fzHRfq7TN5aiN8VxqH+8UNAj55/cppyLCChX6qQlQ07WaGS3dFA=="],
+    "@wrnexus/tracking": ["@wrnexus/tracking@0.3.5", "", {}, "sha512-KZCy0C4NXb+Suk9H36V51TacyMGz0R7DBmxFWsGyP3dkeyrEf3xrljyub/AshvDB6xWfod1VJGcHy6yPWDCBVg=="],
 
-    "@wrnexus/ui": ["@wrnexus/ui@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-rp304L+ko77keevX7uqGXv1nMbvsgisZYzFWm2cV+rDcLGm+Fdj8K3ixVBkXUsynu09HTcgR+8A+idi+1c0yLg=="],
+    "@wrnexus/ui": ["@wrnexus/ui@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5" } }, "sha512-IYB90A0SuvZqOyodz/XxZUkNx+V7D6/tO7vM49F2KR/n53fsxgpmN+psks5SsvfqaLz4Epbuza7x9LFGwGEu1A=="],
 
-    "@wrnexus/uploader": ["@wrnexus/uploader@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-lg45w5gyxoEidcS/61chW3FeLTEQ+mU6q8L/x3LqrwWwTBD3aE+67vvfigs37H7g6WjBGxs4YxseqPQGDhFvdw=="],
+    "@wrnexus/uploader": ["@wrnexus/uploader@0.3.5", "", { "dependencies": { "@wrnexus/core": "^0.3.5" } }, "sha512-A/DOZpz3WoQQ3JTXmbEPX6/qc8aLWLa4zz1ZUBtXdrBq8/MIs9afcHeRG171bhWMsxAA3Tzupl6qcro2++FaKQ=="],
 
-    "@wrnexus/validation": ["@wrnexus/validation@0.3.4", "", {}, "sha512-pSAnBv6WaxW7VfT0As19l9iJE3n61qdEE8EiEU9QYS7YHNXVsY5Af+aqW6uj2mSO64tUxmujUK4kPwd/ezjiow=="],
+    "@wrnexus/validation": ["@wrnexus/validation@0.3.5", "", {}, "sha512-XLwuPZz/2gaoblBIDT9ylXrifq0gSQc+huGWuTdL8SljelLqx4KWBKWfSr4nuUJ6FP7NqV1zpJ0rkGaL+I7dlw=="],
 
     "acorn": ["acorn@8.17.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg=="],
 
diff --git a/package-lock.json b/package-lock.json
index 8a508f3f..77a2e8e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,41 +10,41 @@
       "dependencies": {
         "@iconify-json/lucide": "^1.2.118",
         "@iconify/tailwind4": "^1.2.3",
-        "@wrnexus/ai": "^0.3.4",
-        "@wrnexus/authz": "^0.3.4",
-        "@wrnexus/compiler": "^0.3.4",
-        "@wrnexus/core": "^0.3.4",
-        "@wrnexus/csr": "^0.3.4",
-        "@wrnexus/db": "^0.3.4",
-        "@wrnexus/dev-server": "^0.3.4",
-        "@wrnexus/dev-toolbar": "^0.3.4",
-        "@wrnexus/encryption": "^0.3.4",
-        "@wrnexus/helpers": "^0.3.4",
-        "@wrnexus/i18n": "^0.3.4",
-        "@wrnexus/jwt": "^0.3.4",
-        "@wrnexus/mobile": "^0.3.4",
-        "@wrnexus/native": "^0.3.4",
-        "@wrnexus/oauth": "^0.3.4",
-        "@wrnexus/plugin": "^0.3.4",
-        "@wrnexus/pubsub": "^0.3.4",
-        "@wrnexus/queue": "^0.3.4",
-        "@wrnexus/reactive": "^0.3.4",
-        "@wrnexus/router": "^0.3.4",
-        "@wrnexus/ssr": "^0.3.4",
-        "@wrnexus/styles": "^0.3.4",
-        "@wrnexus/syntax": "^0.3.4",
-        "@wrnexus/test": "^0.3.4",
-        "@wrnexus/tracking": "^0.3.4",
-        "@wrnexus/ui": "^0.3.4",
-        "@wrnexus/uploader": "^0.3.4",
-        "@wrnexus/validation": "^0.3.4"
+        "@wrnexus/ai": "^0.3.5",
+        "@wrnexus/authz": "^0.3.5",
+        "@wrnexus/compiler": "^0.3.5",
+        "@wrnexus/core": "^0.3.5",
+        "@wrnexus/csr": "^0.3.5",
+        "@wrnexus/db": "^0.3.5",
+        "@wrnexus/dev-server": "^0.3.5",
+        "@wrnexus/dev-toolbar": "^0.3.5",
+        "@wrnexus/encryption": "^0.3.5",
+        "@wrnexus/helpers": "^0.3.5",
+        "@wrnexus/i18n": "^0.3.5",
+        "@wrnexus/jwt": "^0.3.5",
+        "@wrnexus/mobile": "^0.3.5",
+        "@wrnexus/native": "^0.3.5",
+        "@wrnexus/oauth": "^0.3.5",
+        "@wrnexus/plugin": "^0.3.5",
+        "@wrnexus/pubsub": "^0.3.5",
+        "@wrnexus/queue": "^0.3.5",
+        "@wrnexus/reactive": "^0.3.5",
+        "@wrnexus/router": "^0.3.5",
+        "@wrnexus/ssr": "^0.3.5",
+        "@wrnexus/styles": "^0.3.5",
+        "@wrnexus/syntax": "^0.3.5",
+        "@wrnexus/test": "^0.3.5",
+        "@wrnexus/tracking": "^0.3.5",
+        "@wrnexus/ui": "^0.3.5",
+        "@wrnexus/uploader": "^0.3.5",
+        "@wrnexus/validation": "^0.3.5"
       },
       "devDependencies": {
         "@eslint/js": "^9.0.0",
         "@tailwindcss/cli": "^4.0.0",
         "@types/bun": "latest",
         "@types/node": "^26.1.1",
-        "@wrnexus/cli": "^0.3.4",
+        "@wrnexus/cli": "^0.3.5",
         "eslint": "^9.0.0",
         "prettier": "latest",
         "tailwindcss": "^4.0.0",
@@ -1304,42 +1304,42 @@
       }
     },
     "node_modules/@wrnexus/ai": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/ai/-/ai-0.3.4.tgz",
-      "integrity": "sha512-Ll6fIKijL/IMKEDjIvi9KVXKjJblFPTaTEKHRuzQVI9r3zM1eYym6a+R2WhsCzda6yi2LkqnYuB1MWysmNuwIA==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/ai/-/ai-0.3.5.tgz",
+      "integrity": "sha512-St3/Fr8O1BFWnzLdp5TynSANYzFxYv1pGIzz2mRZ4SUIIWM96q3kvLUdWNX9bLj2wEQDJjA8E3QmadV0D0PK3Q==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/authz": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/authz/-/authz-0.3.4.tgz",
-      "integrity": "sha512-nngnGOB6hHWf32oGPAl5q81GeycrsqA7y+sC+PsqctY/dcbsSkIVJjq/8Z4uryC4mWYYNpqSfFD7GJa7a4a5hA==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/authz/-/authz-0.3.5.tgz",
+      "integrity": "sha512-l1uz850agaFSWcLXilomSbT6sZXWl2qJtjfRlxeg58uv2rrfYFDJJXqT01Nrb3yg5HuJtenENBsBQOTS6mtRwA==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/cli": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/cli/-/cli-0.3.4.tgz",
-      "integrity": "sha512-Eov9ScHTcGjBhOBAsQvdBRu5Dd9zyFOqQW3DO2wjExS71hVWbPQL6BjNJqcQSwgVh4sOaXnl2zhf8iQ+XAK31Q==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/cli/-/cli-0.3.5.tgz",
+      "integrity": "sha512-MbPiHIgxjQejyHlBHuLnjSW3G7EFdF9J0hONu7Ispj3e4whTya7sXvWSuV4YbS0QG9jgKH1QOuC40SjQttT05g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/compiler": "^0.3.4",
-        "@wrnexus/core": "^0.3.4",
-        "@wrnexus/csr": "^0.3.4",
-        "@wrnexus/db": "^0.3.4",
-        "@wrnexus/dev-server": "^0.3.4",
-        "@wrnexus/i18n": "^0.3.4",
-        "@wrnexus/plugin": "^0.3.4",
-        "@wrnexus/router": "^0.3.4",
-        "@wrnexus/styles": "^0.3.4",
-        "@wrnexus/syntax": "^0.3.4",
-        "@wrnexus/ui": "^0.3.4",
-        "@wrnexus/validation": "^0.3.4"
+        "@wrnexus/compiler": "^0.3.5",
+        "@wrnexus/core": "^0.3.5",
+        "@wrnexus/csr": "^0.3.5",
+        "@wrnexus/db": "^0.3.5",
+        "@wrnexus/dev-server": "^0.3.5",
+        "@wrnexus/i18n": "^0.3.5",
+        "@wrnexus/plugin": "^0.3.5",
+        "@wrnexus/router": "^0.3.5",
+        "@wrnexus/styles": "^0.3.5",
+        "@wrnexus/syntax": "^0.3.5",
+        "@wrnexus/ui": "^0.3.5",
+        "@wrnexus/validation": "^0.3.5"
       },
       "bin": {
         "wrnexus": "dist/index.js"
@@ -1349,286 +1349,286 @@
       }
     },
     "node_modules/@wrnexus/compiler": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/compiler/-/compiler-0.3.4.tgz",
-      "integrity": "sha512-jcVbA1349RQ+/BLOGmmZ8fjdsGrFGs/8X+raSdhea9RIKLqDFMrloJ/p/MVLZfYLYOREt4ZxguWN6AVNxDf64g==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/compiler/-/compiler-0.3.5.tgz",
+      "integrity": "sha512-X295aKswQEJOMsdPFbjyWqW7gMHiIi9OYmYwvpKtWIANI4ETRQ5Omp2X2rZO07bYyY5S6jKOlrTrqK2Xq/DfFg==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/syntax": "^0.3.4"
+        "@wrnexus/syntax": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/core": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/core/-/core-0.3.4.tgz",
-      "integrity": "sha512-Ug0M2aDjaqcjjfmGitApaQYLHqbLQ9K8VFNfXuU+fL/qisyW3iN7AHCqxqfBW4uNyQvtNavbNN9d/iCZAi0pFQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/core/-/core-0.3.5.tgz",
+      "integrity": "sha512-XqdeY1kM7jV5LcD+YxeFMazaynpk0DrC7F8Qt+hij18q6z9pBUilYnHBTI9R5qRtzqSW2r774bJ5tN6QvMnvVg==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/csr": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/csr/-/csr-0.3.4.tgz",
-      "integrity": "sha512-6zjK2usMWD2psI19kLaEdmOAOTPFQFi0TF01gd0JkBi3FphXbi+mIrzEplMyVQN1U3jJZpBf2Gto0+V02tCudQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/csr/-/csr-0.3.5.tgz",
+      "integrity": "sha512-Rv1RVsW59AMfyfEMuBoIQSCXPIjYrcVOYSwmrPJDV7o6IK8z6w2MnnZoiBjnyRhMbVOy1+i6uVn9Lf+4vuorlg==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/db": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/db/-/db-0.3.4.tgz",
-      "integrity": "sha512-txcjaw3wGckNBW8Zsn4lS46el0+ntZQcbdiR3avOyXXrq0fKau0Sk23fgCP/v0EtNMJc0J2bQUypU1phUuFFcg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/db/-/db-0.3.5.tgz",
+      "integrity": "sha512-qD5HpAHssQfZYYy/VUps0cfg5/iXk9G4LMiN0ALVp6irUVBmWkn0ORZvigGsI507suumnvfBy/pAPulFPMRcaw==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/dev-server": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/dev-server/-/dev-server-0.3.4.tgz",
-      "integrity": "sha512-oPNnqalMAN8Uu5WPJgVeoDo5zo4qPi6t73scIgZ8WErtRYhqc2pRaH5EVAOppL5B50NFr5VUeptqgOKp5T20Eg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/dev-server/-/dev-server-0.3.5.tgz",
+      "integrity": "sha512-Gbgo4aPZHtEbuZpFQYUxZpT9HvcyRnnW0la5iYRrbSQ9VIYNR/NqQRG0//nA9fA9k+jF+1OgV2jkEzugsniGSw==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/compiler": "^0.3.4",
-        "@wrnexus/core": "^0.3.4",
-        "@wrnexus/csr": "^0.3.4",
-        "@wrnexus/db": "^0.3.4",
-        "@wrnexus/dev-toolbar": "^0.3.4",
-        "@wrnexus/i18n": "^0.3.4",
-        "@wrnexus/plugin": "^0.3.4",
-        "@wrnexus/pubsub": "^0.3.4",
-        "@wrnexus/router": "^0.3.4",
-        "@wrnexus/ssr": "^0.3.4",
-        "@wrnexus/styles": "^0.3.4",
-        "@wrnexus/ui": "^0.3.4",
-        "@wrnexus/uploader": "^0.3.4",
-        "@wrnexus/validation": "^0.3.4"
+        "@wrnexus/compiler": "^0.3.5",
+        "@wrnexus/core": "^0.3.5",
+        "@wrnexus/csr": "^0.3.5",
+        "@wrnexus/db": "^0.3.5",
+        "@wrnexus/dev-toolbar": "^0.3.5",
+        "@wrnexus/i18n": "^0.3.5",
+        "@wrnexus/plugin": "^0.3.5",
+        "@wrnexus/pubsub": "^0.3.5",
+        "@wrnexus/router": "^0.3.5",
+        "@wrnexus/ssr": "^0.3.5",
+        "@wrnexus/styles": "^0.3.5",
+        "@wrnexus/ui": "^0.3.5",
+        "@wrnexus/uploader": "^0.3.5",
+        "@wrnexus/validation": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/dev-toolbar": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/dev-toolbar/-/dev-toolbar-0.3.4.tgz",
-      "integrity": "sha512-LCHpKS3z8rDiJ375wGyxltg5rzB8dt70dDlUZGoZWgzBv9lSsl0yLR0l1bOFeGsgtz1tMza5ngXafsk/CDjs4w==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/dev-toolbar/-/dev-toolbar-0.3.5.tgz",
+      "integrity": "sha512-1TxY5b02B+EbErbH7H6UP9oVtR9CYdrVEEftoSs4Q1h2nNwHrjxd/48iL0qvFQCdT0fGyDK499g44MydRqJHNw==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/encryption": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/encryption/-/encryption-0.3.4.tgz",
-      "integrity": "sha512-y0jzdE6uVLXIUfxyB+tFz49zNmZcxbr37/1oMH9Uc2Q+Mxl+YcefmTnd+yqN9P2ns8D/VPcfUuZhzpePJE0URQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/encryption/-/encryption-0.3.5.tgz",
+      "integrity": "sha512-7lM00C+Di8uutcrUqBEEpi1puC2D1WW5v8TwDfuMv/lrYQ5CZ4rArAptysKzsmTnFUm2PY9YmUgJu2uAula8tA==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/helpers": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/helpers/-/helpers-0.3.4.tgz",
-      "integrity": "sha512-btniCblXGsSmEcpMkh8AMREBB+nEjmd3Qi/qsvrJWbIWLL0AZCHntXkNOlomhtcKlaUo0P9lOTcqyXnejWA4ig==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/helpers/-/helpers-0.3.5.tgz",
+      "integrity": "sha512-ZjUFfjrYY8/JIgcdkRKHlN0oaffwDFtyFLHTG+rI8JXX9iWyiMMS9+y68Tun1yyoLj4UMa+RuZd8U5FE7JV6OQ==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/i18n": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/i18n/-/i18n-0.3.4.tgz",
-      "integrity": "sha512-t3HNlaLW8aRXxgY+suhVk9kwY0fWmNUkHh4o1VnvhgFpPV+kSCDl7as5ug4m5MY0uQ33pW8fqqSTh8NML//2DQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/i18n/-/i18n-0.3.5.tgz",
+      "integrity": "sha512-HWXw/PX9reAgfHJjMEKfVjUFmfnvjh7k7y9q+43L7BAuHctb4k12QBbczapZbUa0GrwBA8skyhNxi+pun2vDJQ==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/jwt": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/jwt/-/jwt-0.3.4.tgz",
-      "integrity": "sha512-fvclwmXamNi5gOf6ETdVUJoLoj6PY+e4rGVwpF1frFTsnFY8/crYA2Cy8GW4cdWhCwy0J1JZBiUwtHs2BMF9gQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/jwt/-/jwt-0.3.5.tgz",
+      "integrity": "sha512-tELPqg20s+nBNiMP/hzvdzG70E1mN6gjyLzjHgak96sy7kjMgeS4vl9J7VicpMnTowm5nKQIjTLLRXPQQKLcog==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/mobile": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/mobile/-/mobile-0.3.4.tgz",
-      "integrity": "sha512-v0GC5d/2Hptqz7ktbwKSeSeE/ZGYluem45LM2vOD9zahjNe4ZEdwTd8g1xCeDtx9vdkz8OqdNptAmFn0dAoe0A==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/mobile/-/mobile-0.3.5.tgz",
+      "integrity": "sha512-Q58bw2J56+eZ1TDCiiFaE4/BsjNG/05juFBvrt/DnNi0pLSKPL0TZggeeK4F0z8NWEWZiwwcHS+XqixBb/LytQ==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/native": "^0.3.4"
+        "@wrnexus/native": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/native": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/native/-/native-0.3.4.tgz",
-      "integrity": "sha512-Wm6wkDhVBUPDTLB6inh2HCWhW/2zXKddP6+gozgH5nU4SUd6CGS1nr53eP5HPiLaGmtScKbLyuNjf5gkx93i/g==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/native/-/native-0.3.5.tgz",
+      "integrity": "sha512-Ze+CJSs04YbBMYRgJ4QnkvThSaz2I0lWeYXGKYqkBLtYs6DKDRJZpHBfu+acTKeQKTxBNxeL0Ye+YjbMG/LVGQ==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/oauth": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/oauth/-/oauth-0.3.4.tgz",
-      "integrity": "sha512-1FCSKTEljhxYVAMX/hmZIs4Qip9XSd1eGG6Ret2RMKrOGB5yUs6KZxjUjHK1uafUd11XL6yDLuDKJW3Nq7sC1Q==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/oauth/-/oauth-0.3.5.tgz",
+      "integrity": "sha512-89TpXiP4dMIF5Wb6TRPHThADRnjTjhhtOckqjQJrNTHWkDuK+YG29G0XrCjxp03Rdw7m1SywOEhL3rcBrTvR2Q==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/plugin": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/plugin/-/plugin-0.3.4.tgz",
-      "integrity": "sha512-DQ0d0dAkwKICDQKaUX1Uw6kcr/3pFr69fWDY7sBReTr53O6D0gLbvCIYAR6K5TVili5+oWqa85Yr+0M/CGmCZg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/plugin/-/plugin-0.3.5.tgz",
+      "integrity": "sha512-kigwQpjCNdKIohfIgNqFLq6MDRfS20Rw5EF0Zaiia+1CodHfKmy33RvmF1xQesY1kOt86OXoSbo4n4jIlv5Kxw==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/syntax": "^0.3.4"
+        "@wrnexus/syntax": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/pubsub": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/pubsub/-/pubsub-0.3.4.tgz",
-      "integrity": "sha512-0eKJpoQ+Agft2thont0O5zTNhdfOiECP0rZ/+uXfXLcW/pzDJN2gOz8H1BaXjiuhEVMSZ5NB/3d7BiSYF3/zwg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/pubsub/-/pubsub-0.3.5.tgz",
+      "integrity": "sha512-NfMUESzvlKVrEvMHEByDa8HRRr/ofbaaGObvjn3jEoaI/njEN15PXuquNko0FVpd+nW7CHIRDOk7uEsfPYbJKQ==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/queue": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/queue/-/queue-0.3.4.tgz",
-      "integrity": "sha512-eT4prWQTr4x2u72uEf5w21Ph5EU4piaqt20i+v0rKT8iTTQ+bB569AaTG4S9JkF+sdmGhgwCs53Sh1WfDcX1pg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/queue/-/queue-0.3.5.tgz",
+      "integrity": "sha512-IzsbmEXgNhIdutwrifi94Az/5gfpPqTvplLVONmCeFwzaMxRNSx5xQlzTjdForitemFaSv851e0Y6zInkdzQgg==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/reactive": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/reactive/-/reactive-0.3.4.tgz",
-      "integrity": "sha512-1v2f2AVnTq1+UPkkaWbkj0k3/KQmdYfzsRaccYYkduPghqhPqRXRLOfPVS89bHjg6qBwKJtNdyXhlb9/kN/TaA==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/reactive/-/reactive-0.3.5.tgz",
+      "integrity": "sha512-D0oVOvYkKSW/bi5UTL6tYczCgrGnpT1kQ6R6rpPcFNHHgwM8p/unkPD0R46sj26lSsk1hka/Cy82EjE3zkwWhA==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/router": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/router/-/router-0.3.4.tgz",
-      "integrity": "sha512-1JKbcxFsVyKO+JaHTrgIpBwCEQxmBfQufAF73J8Y25M1h0F1yepuFnCln1X7GF8VHWYWYwgQf64yJ0o18QWxjg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/router/-/router-0.3.5.tgz",
+      "integrity": "sha512-wcJwThYfx2gh4wHmKhuqdzXGDFbqlmDOBXkNpwagiDfI70yYt9QhxQ767J8iknNczofemiCpzszH0eV4Dl2glg==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/compiler": "^0.3.4",
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/compiler": "^0.3.5",
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/ssr": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/ssr/-/ssr-0.3.4.tgz",
-      "integrity": "sha512-WFX3LYCl4mQ0+3oRAzRmoeLIpwYHyYDGpLqg/HmxWLbUqvZzqX9jwoWypvcAK7//x8DF/UGV0LbYf/s3ko3gQg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/ssr/-/ssr-0.3.5.tgz",
+      "integrity": "sha512-xP0oHarZ5BISIJSRhff2tXa5xjn49L9lDotlOUSUJuuUkOC9wPtS44qdJePEZAHipH6BwOxrkbFfQ+WWPC/mkw==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/styles": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/styles/-/styles-0.3.4.tgz",
-      "integrity": "sha512-w8OjokQEfIrhVrIQsEOhUJJ4XqVLoo7Zz5kJEYox/69LCBXQioRq6UIti7ZNvG0vrQYFE6XCfumvN69A6kMF4g==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/styles/-/styles-0.3.5.tgz",
+      "integrity": "sha512-ZYjrm2VPwE+mUK7+UsE9gBO6yDpjmSFCMAM8+Jagg2wF6jty+nMnEMv9Lzn0IbXUXFBq7S3/5zDDvZL6ML7BIw==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4",
-        "@wrnexus/plugin": "^0.3.4",
-        "@wrnexus/uploader": "^0.3.4"
+        "@wrnexus/core": "^0.3.5",
+        "@wrnexus/plugin": "^0.3.5",
+        "@wrnexus/uploader": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/syntax": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/syntax/-/syntax-0.3.4.tgz",
-      "integrity": "sha512-Op0ylbSP1pM0C+T/7eH5Z6P9QXRY4KvbELUwBYbhWhZF1gJAPCWgm+wnUnBN/K/aHqgkMKWda8ojqZ9cDJPRIw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/syntax/-/syntax-0.3.5.tgz",
+      "integrity": "sha512-e0xhqqjW+V/2QiSaICV2dx11qT3FDTNGGSvoxJeZhr67Heh0SHUPxtv9Po8A/bP97gUShjKNCE9bGLHOUPfKnA==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/test": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/test/-/test-0.3.4.tgz",
-      "integrity": "sha512-ZTErOYOEFeRIyJ0q7CX286flSvszMqd0sVz1H8v9bIwEpmknyPD87Hs4yEOnqLT3Pw9BsCvWqri6M8PowguC1g==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/test/-/test-0.3.5.tgz",
+      "integrity": "sha512-FN4qINVCO9QKvH0GMECHvIBNtSjIve7c6UJHlY5L/kiC9UXJU4vDgz6fjjp1tNwKoTHVu5RFhhTdh+Hu4Cgc8A==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/tracking": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/tracking/-/tracking-0.3.4.tgz",
-      "integrity": "sha512-9olQXJVzUvtKsL+oe816qTaA+SbkFAetmx4fzHRfq7TN5aiN8VxqH+8UNAj55/cppyLCChX6qQlQ07WaGS3dFA==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/tracking/-/tracking-0.3.5.tgz",
+      "integrity": "sha512-KZCy0C4NXb+Suk9H36V51TacyMGz0R7DBmxFWsGyP3dkeyrEf3xrljyub/AshvDB6xWfod1VJGcHy6yPWDCBVg==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/ui": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/ui/-/ui-0.3.4.tgz",
-      "integrity": "sha512-rp304L+ko77keevX7uqGXv1nMbvsgisZYzFWm2cV+rDcLGm+Fdj8K3ixVBkXUsynu09HTcgR+8A+idi+1c0yLg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/ui/-/ui-0.3.5.tgz",
+      "integrity": "sha512-IYB90A0SuvZqOyodz/XxZUkNx+V7D6/tO7vM49F2KR/n53fsxgpmN+psks5SsvfqaLz4Epbuza7x9LFGwGEu1A==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/uploader": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/uploader/-/uploader-0.3.4.tgz",
-      "integrity": "sha512-lg45w5gyxoEidcS/61chW3FeLTEQ+mU6q8L/x3LqrwWwTBD3aE+67vvfigs37H7g6WjBGxs4YxseqPQGDhFvdw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/uploader/-/uploader-0.3.5.tgz",
+      "integrity": "sha512-A/DOZpz3WoQQ3JTXmbEPX6/qc8aLWLa4zz1ZUBtXdrBq8/MIs9afcHeRG171bhWMsxAA3Tzupl6qcro2++FaKQ==",
       "license": "MIT",
       "dependencies": {
-        "@wrnexus/core": "^0.3.4"
+        "@wrnexus/core": "^0.3.5"
       },
       "engines": {
         "bun": ">=1.3.0"
       }
     },
     "node_modules/@wrnexus/validation": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@wrnexus/validation/-/validation-0.3.4.tgz",
-      "integrity": "sha512-pSAnBv6WaxW7VfT0As19l9iJE3n61qdEE8EiEU9QYS7YHNXVsY5Af+aqW6uj2mSO64tUxmujUK4kPwd/ezjiow==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@wrnexus/validation/-/validation-0.3.5.tgz",
+      "integrity": "sha512-XLwuPZz/2gaoblBIDT9ylXrifq0gSQc+huGWuTdL8SljelLqx4KWBKWfSr4nuUJ6FP7NqV1zpJ0rkGaL+I7dlw==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.3.0"
diff --git a/package.json b/package.json
index 680c8193..5974b048 100644
--- a/package.json
+++ b/package.json
@@ -23,41 +23,41 @@
   "dependencies": {
     "@iconify-json/lucide": "^1.2.118",
     "@iconify/tailwind4": "^1.2.3",
-    "@wrnexus/ai": "^0.3.4",
-    "@wrnexus/authz": "^0.3.4",
-    "@wrnexus/compiler": "^0.3.4",
-    "@wrnexus/core": "^0.3.4",
-    "@wrnexus/csr": "^0.3.4",
-    "@wrnexus/db": "^0.3.4",
-    "@wrnexus/dev-server": "^0.3.4",
-    "@wrnexus/encryption": "^0.3.4",
-    "@wrnexus/helpers": "^0.3.4",
-    "@wrnexus/i18n": "^0.3.4",
-    "@wrnexus/jwt": "^0.3.4",
-    "@wrnexus/mobile": "^0.3.4",
-    "@wrnexus/native": "^0.3.4",
-    "@wrnexus/oauth": "^0.3.4",
-    "@wrnexus/pubsub": "^0.3.4",
-    "@wrnexus/queue": "^0.3.4",
-    "@wrnexus/reactive": "^0.3.4",
-    "@wrnexus/router": "^0.3.4",
-    "@wrnexus/ssr": "^0.3.4",
-    "@wrnexus/styles": "^0.3.4",
-    "@wrnexus/test": "^0.3.4",
-    "@wrnexus/tracking": "^0.3.4",
-    "@wrnexus/ui": "^0.3.4",
-    "@wrnexus/uploader": "^0.3.4",
-    "@wrnexus/validation": "^0.3.4",
-    "@wrnexus/dev-toolbar": "^0.3.4",
-    "@wrnexus/syntax": "^0.3.4",
-    "@wrnexus/plugin": "^0.3.4"
+    "@wrnexus/ai": "^0.3.5",
+    "@wrnexus/authz": "^0.3.5",
+    "@wrnexus/compiler": "^0.3.5",
+    "@wrnexus/core": "^0.3.5",
+    "@wrnexus/csr": "^0.3.5",
+    "@wrnexus/db": "^0.3.5",
+    "@wrnexus/dev-server": "^0.3.5",
+    "@wrnexus/encryption": "^0.3.5",
+    "@wrnexus/helpers": "^0.3.5",
+    "@wrnexus/i18n": "^0.3.5",
+    "@wrnexus/jwt": "^0.3.5",
+    "@wrnexus/mobile": "^0.3.5",
+    "@wrnexus/native": "^0.3.5",
+    "@wrnexus/oauth": "^0.3.5",
+    "@wrnexus/pubsub": "^0.3.5",
+    "@wrnexus/queue": "^0.3.5",
+    "@wrnexus/reactive": "^0.3.5",
+    "@wrnexus/router": "^0.3.5",
+    "@wrnexus/ssr": "^0.3.5",
+    "@wrnexus/styles": "^0.3.5",
+    "@wrnexus/test": "^0.3.5",
+    "@wrnexus/tracking": "^0.3.5",
+    "@wrnexus/ui": "^0.3.5",
+    "@wrnexus/uploader": "^0.3.5",
+    "@wrnexus/validation": "^0.3.5",
+    "@wrnexus/dev-toolbar": "^0.3.5",
+    "@wrnexus/syntax": "^0.3.5",
+    "@wrnexus/plugin": "^0.3.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@tailwindcss/cli": "^4.0.0",
     "@types/bun": "latest",
     "@types/node": "^26.1.1",
-    "@wrnexus/cli": "^0.3.4",
+    "@wrnexus/cli": "^0.3.5",
     "eslint": "^9.0.0",
     "prettier": "latest",
     "tailwindcss": "^4.0.0",
@@ -65,6 +65,6 @@
     "typescript-eslint": "latest"
   },
   "wrnexus": {
-    "version": "0.3.4"
+    "version": "0.3.5"
   }
 }
diff --git a/scripts/generate-docs.ts b/scripts/generate-docs.ts
index 087ce5dc..4c447b81 100644
--- a/scripts/generate-docs.ts
+++ b/scripts/generate-docs.ts
@@ -1,4 +1,11 @@
-import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  unlinkSync,
+  writeFileSync,
+} from "node:fs";
 import { join, resolve } from "node:path";
 
 const root = resolve(import.meta.dir, "..");
@@ -424,9 +431,12 @@ for (const item of uiReference.components) {
   );
 }
 for (const file of readdirSync(componentPages)) {
-  if (file.endsWith(".wrn") && !currentComponentFiles.has(file)) {
-    throw new Error(`Stale generated component page: ${file}`);
+  if (!file.endsWith(".wrn") || currentComponentFiles.has(file)) {
+    continue;
   }
+
+  unlinkSync(join(componentPages, file));
+  console.log(`Removed stale generated component page: ${file}`);
 }
 
 writeFileSync(