Refresh UI components and showcase; release updated framework packages

bun.lock

@@ -237,7 +237,7 @@
     },
     "packages/auth": {
       "name": "@wrnexus/auth",
-      "version": "0.8.32",
+      "version": "0.8.33",
       "dependencies": {
         "@wrnexus/authz": "workspace:*",
         "@wrnexus/captcha": "workspace:*",
@@ -322,7 +322,7 @@
     },
     "packages/cli": {
       "name": "@wrnexus/cli",
-      "version": "0.8.70",
+      "version": "0.8.71",
       "bin": {
         "wrnexus": "src/index.ts",
       },
@@ -350,7 +350,7 @@
     },
     "packages/compiler": {
       "name": "@wrnexus/compiler",
-      "version": "0.8.29",
+      "version": "0.8.30",
       "dependencies": {
         "@wrnexus/csr": "workspace:*",
         "@wrnexus/store": "workspace:*",
@@ -368,11 +368,11 @@
     },
     "packages/core": {
       "name": "@wrnexus/core",
-      "version": "0.8.15",
+      "version": "0.8.16",
     },
     "packages/csr": {
       "name": "@wrnexus/csr",
-      "version": "0.8.40",
+      "version": "0.8.41",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
@@ -387,7 +387,7 @@
     },
     "packages/dev-server": {
       "name": "@wrnexus/dev-server",
-      "version": "0.8.65",
+      "version": "0.8.66",
       "dependencies": {
         "@wrnexus/authz": "workspace:*",
         "@wrnexus/cache": "workspace:*",
@@ -590,7 +590,7 @@
     },
     "packages/payment": {
       "name": "@wrnexus/payment",
-      "version": "0.8.8",
+      "version": "0.8.9",
       "dependencies": {
         "@wrnexus/db": "workspace:*",
         "@wrnexus/plugin": "workspace:*",
@@ -621,7 +621,7 @@
     },
     "packages/pwa": {
       "name": "@wrnexus/pwa",
-      "version": "0.8.11",
+      "version": "0.8.12",
       "devDependencies": {
         "@types/bun": "^1.3.14",
         "typescript": "^6.0.3",
@@ -704,7 +704,7 @@
     },
     "packages/ssr": {
       "name": "@wrnexus/ssr",
-      "version": "0.8.11",
+      "version": "0.8.12",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
         "@wrnexus/security": "workspace:*",
@@ -717,7 +717,7 @@
     },
     "packages/styles": {
       "name": "@wrnexus/styles",
-      "version": "0.8.22",
+      "version": "0.8.23",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
         "@wrnexus/plugin": "workspace:*",
@@ -730,7 +730,7 @@
     },
     "packages/test": {
       "name": "@wrnexus/test",
-      "version": "0.8.15",
+      "version": "0.8.16",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
@@ -749,7 +749,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.82",
+      "version": "0.8.84",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
@@ -784,7 +784,7 @@
     },
     "packages/viewer": {
       "name": "@wrnexus/viewer",
-      "version": "0.8.12",
+      "version": "0.8.13",
       "dependencies": {
         "@wrnexus/block-editor": "workspace:*",
         "@wrnexus/plugin": "workspace:*",

docs/ui-component-audit.md

@@ -0,0 +1,58 @@
+# Component showcase audit
+
+Reviewed all 102 component routes for loading, empty examples, and desktop page overflow. This is a route and rendering audit, not exhaustive testing of every prop combination.
+
+Corrections include:
+
+- Corrected the showcase's Tailwind source paths so package-owned icons are generated.
+- Reduced advanced select and PIN input sizing and corrected search icon padding.
+- Restored grouped combobox options and verified selection.
+- Defaulted ToggleCount to its first valid choice and supplied meaningful monthly/yearly examples.
+- Made the password leading icon optional without reserving empty space.
+- Added populated accordion examples with plain, bordered, and separated layouts, plus start/end indicators.
+- Corrected badge examples and theme-aware soft/outline colors.
+- Normalized structured playground defaults, including tables and time pickers.
+- Preserved server-rendered composite previews during hydration and subsequent playground updates.
+- Supplied splitter pane content and made output observation compatible with both runtime registry forms.
+
+Validation includes component/showcase tests, compiler and accessibility checks for 201 example pages, production showcase build, browser interaction checks, and responsive checks. Visual-contract checks compare source hashes, not screenshots.
+
+## Follow-up review: component surfaces and playground
+
+Reviewed all 102 sidebar routes in order, inspecting the rendered examples for missing icon masks, empty content, and horizontal overflow. This is a structural pass, not exhaustive testing of every prop combination. Manually checked the reported accordion, alert, avatar group, button group, card, and carousel surfaces, plus numeric playground interaction and prop updates.
+
+- Playground input/change refreshes are restricted to the settings form. Interacting with the component no longer replaces its state. A regression test checks both paths.
+- Sidebar active state refreshes on client navigation and scrolls the active entry into view without scrolling the page.
+- Accordion answers align with trailing indicators, and separate panels no longer get a second outer border.
+- Alerts use concise examples with zero or one action and theme-aware text colors.
+- Avatar groups have named members and role details for hover/focus; overflow counts stay on one line.
+- Button groups include their own button foundation and correctly update selected state.
+- Cards no longer receive generic group arrays by default; group content has padding and responsive columns.
+- Carousel supports `framed=false` by default and `framed=true` explicitly. Unframed removes the outer surface as well as the viewport border. Image captions have a contrast overlay.
+- Preview grid children can shrink within their panels; password popovers and breadcrumbs respect their container width.
+
+Validation: 243 UI/showcase tests passed; 201 example pages passed compiler, accessibility, and formatter checks. Browser interaction checks cover numeric value persistence, settings regeneration, accordion expansion, button selection, carousel next-slide, and avatar focus details. Integrations that need external providers and every optional prop permutation are not covered by these checks.
+
+Phone-width review: all 102 pages fit the viewport at 390px. Fixed inner overflow in password requirements and pagination. Verified light/dark stylesheet switching and saved appearance preferences; added a regression for switching before the theme runtime loads.
+
+
+## Catalog and interaction update
+
+The catalog now separates 84 primitive components, 14 blocks, and six standalone examples. `/preview` and `/templates` link to working pages with copyable source; the legacy design-system routes and four requested shell components are removed from the showcase. Package exports remain compatible.
+
+Rebuilt Rating, StyledIcon, ListGroup, DragAndDrop, DataMap and the basic rich-text editor. Map demonstrates an image-backed office plan with markers and zoom; it is not a geographic tile service. DataMap is an activity heatmap. These examples require no third-party provider.
+
+Fixed anchored calendar/time overlays, datetime selection, controlled modal rendering, table page-size selection, optional clipboard labels, input icon placement, slider alignment and stateful stepper navigation. Existing keyed rows stay attached when notifications are appended, avoiding animation restarts. Added image and headerless card examples and meaningful chat, tree, chart and upload data.
+
+Validation: 380 UI, showcase and CSR tests pass; 211 example pages pass compiler/accessibility/formatter checks; the showcase production build succeeds. Browser checks confirm external modal open/close, anchored calendar, rating selection, list reordering/editor input, right-click menu, table size 25 with matching selected item, gallery routes and sidebar active state. These checks do not cover every optional configuration or external provider integration.
+
+
+## Follow-up: controls and gallery separation
+
+Added fractional Rating and RangeSlider examples, named Card header/footer slots with visibility controls, custom TimePicker within DatePicker, calendar completion/outside dismissal, implicit switch label association, native search-clear suppression, multi-file names, interactive LegendIndicator, bar/line Chart data props and expanded rich-text formatting. Centered modals use data-modal-close for custom dismissal buttons. Confetti now uses a canvas particle burst with reduced-motion handling.
+
+Map defaults to an OpenStreetMap geographic embed; Google Maps supports an Embed API key, query, coordinates, zoom and map type. The showcase allows only the two provider iframe origins. Google rendering still requires a user-supplied provider key.
+
+Examples and Blocks now use a gallery layout without a documentation sidebar. Templates provide four distinct product starting pages: dashboard, commerce, marketing and productivity. Removed the legacy v0.6 sidebar group, placed Advanced Forms after Tables, and added practical code to installation/customization/accessibility guides. Playground code initializes from the actual controls and array props use state bindings.
+
+Browser checks include calendar Done, nested custom time updates, switch label toggling, centered modal dismissal, loaded geographic map tiles, and visible canvas confetti. Production preview avoids development refresh resets during review.

docs/ui-design-refresh.md

@@ -0,0 +1,47 @@
+# Compact application design
+
+The UI package now uses a quiet neutral canvas, compact application headings,
+consistent controls, and layered charcoal surfaces in dark mode. Marketing
+display typography remains available through Hero and MarketingSectionHeader.
+
+## Shared defaults
+
+- Control heights: 32px small, 40px default, 44px large; larger targets on coarse pointers.
+- Corners: 6px controls, 10px panels, 12px dialogs.
+- Flat cards and metric panels, with elevation reserved for overlays and explicit variants.
+- No global entry animation or automatic hover lift on every button and linked article.
+- PageHeader and SectionHeader use application-scale headings.
+- DatePicker aligns days to weekdays, respects month length and date bounds, and supports arrow keys and Escape.
+
+Configure `radius-sm`, `radius-md`, `radius-lg`, `control-height-sm`,
+`control-height`, `control-height-lg`, `space-panel`, and the existing semantic
+color/shadow tokens through `theme.themes`. Geometry and elevation are no longer
+overwritten by a second global token declaration in the generated stylesheet.
+Existing names, slots, and events remain available. MetricCard's default hover
+is now `none`; use `hover="lift"` to retain the explicit elevated treatment.
+
+## Review pages
+
+Run the component showcase and open:
+
+- `/design-system`: composed workspace overview and invitation dialog.
+- `/design-system/profile`: profile form and preferences.
+- `/design-system/login`: quiet split sign-in layout.
+- `/components/date-picker`: calendar variants and controls.
+
+The preview uses sample data and never sends invitations or sign-in requests.
+Light and dark buttons use the native theme stylesheet switcher. The showcase
+generator preserves the navigation link; these three authored pages are not
+generated or overwritten by it.
+
+## Adopting the refresh
+
+Consumers receive the shared component styles and theme defaults when they adopt
+the updated packages. Review application overrides for large headings, nested
+cards, generous gaps, and hard-coded colors. The example showcase, CRM, and basic
+application styles have been adjusted here. The deployed Account application's
+page source is outside this repository and still needs its own layout migration.
+
+Validate light/dark, narrow viewports, keyboard interaction, long text, and custom
+theme overrides before refreshing the visual-contract baseline. That contract
+is a file-hash check, not screenshot comparison.

docs/ui-visual-contract-0.8.json

@@ -2,109 +2,109 @@
   "schemaVersion": 1,
   "releaseLine": "0.8",
   "artifacts": {
-    "packages/ui/components/Accordion.wrn": "09251f76a2f9385e97eb67e06c0cf868e1771ac5f420647221bec5160287034b",
-    "packages/ui/components/AdvancedSelect.wrn": "6dff7bf66a141e9d06e82d638bec3646ac5a0601f5a2145fabf281a1363edc36",
+    "packages/ui/components/Accordion.wrn": "f3480c567498f9a26a3441f4e96f47034b80422062fe8484b9957286f4a2fec1",
+    "packages/ui/components/AdvancedSelect.wrn": "ab75393f1f21654da43004267cd039e51a92aac0dd8bdf7a970f8b7830159ce9",
     "packages/ui/components/AnnouncementBar.wrn": "ecf85f5a050ef1afa193d85aa6acdb31638e48191594ddcc4f51cad4a77935dd",
     "packages/ui/components/AuthForm.wrn": "9e65faa7780d75abae2f1fe4a2333f4134840bca6c66b7411979d770f9050bc2",
-    "packages/ui/components/AuthSplitLayout.wrn": "724938921bc38cc5a0422de69c237b630f099f2df94c66977362b048e4a420a5",
-    "packages/ui/components/AvatarGroup.wrn": "30b702e06a1adff8b9bae32820206020e086a69560cbdcbadb19f04f25951f97",
+    "packages/ui/components/AuthSplitLayout.wrn": "f29a8f374007b7342d6946d7c57e631abb9730f4d952942606b9b1cf67612c38",
+    "packages/ui/components/AvatarGroup.wrn": "96a3ac42b72854449a89fcb87e62c616f78315d630ed9fa5da1e61db4c2a13ce",
     "packages/ui/components/BackToTop.wrn": "d4b8d1fd37ff26c89b4276ce54ce6ac9581dc2ff8bbcbe160e072778bba76eab",
     "packages/ui/components/Blockquote.wrn": "bc1ce41a5986a563072639e7f641d55b47816a8ec615169fe329c7a3ee24a16e",
-    "packages/ui/components/Breadcrumb.wrn": "16907a6fe84740be2a17de7514237e8250f2cad40c09605c77a45fa53fdf3f63",
-    "packages/ui/components/ButtonGroup.wrn": "fc23565ad56bd8483fcb777d9e02ccba2f9ea476c085754d42503bb83b718f72",
+    "packages/ui/components/Breadcrumb.wrn": "2f1a48a0b3fe1d5e8c36ee5929a034cb6ed4c4f6fb7031085829f20c4aac008e",
+    "packages/ui/components/ButtonGroup.wrn": "b841e02296f90e86ffea6573a6f3824d04b51cc8e5e822c7a29fcc0661e6fca2",
     "packages/ui/components/CTASection.wrn": "f6872b980432d5ee9d88388250be9838ccce51bd706349b283ef472ee692b237",
-    "packages/ui/components/Card.wrn": "be8cd6a438d1ede4c284a302b76f0fbc235a2423b83a7ced21131763fecc8a90",
-    "packages/ui/components/Carousel.wrn": "e7d921f802aa19210f3f415b59b70750a2c8d78e30684ad334809741c70a6bf9",
-    "packages/ui/components/Chart.wrn": "07bc01247b5a1c2b82c2ba8386b7fcdbf480efead75d52b7da04d471072c7ee4",
+    "packages/ui/components/Card.wrn": "08849755d68b067e8b14275d97a65cd93a74932ca1c8f0daa4e042cdf049e471",
+    "packages/ui/components/Carousel.wrn": "f3f2d70709fb25185ac6546ea5b6d394362bd2e0623e1462c439fba9a25e5f37",
+    "packages/ui/components/Chart.wrn": "80ef5b8e0e79ad494b3d21aedf36e01bffe9a50e4f43c0bd5af083efc11a5cab",
     "packages/ui/components/ChatBubble.wrn": "d71f7d6567d76ac0eb3ecc8e2e567fec12bb3236ea05f4d0a72286abc0b7cbb1",
-    "packages/ui/components/Clipboard.wrn": "76bf670f985e6b92a1b9cda746039cff407e6137e27f68fd1d43c5ff16134f22",
+    "packages/ui/components/Clipboard.wrn": "3de4c3d6e94472651fe241ae20f0e37f2cd6d82b3bbae86ba155d8a3ba1b955e",
     "packages/ui/components/Collapse.wrn": "26df087a61c82f1aa1749785f4c9be654c4f934859c1a47acfcb8cc67eecc75d",
-    "packages/ui/components/ColorPicker.wrn": "ccac7eb49c0f443b404004f1298fa905fde45c52b51466194920939c920348c9",
+    "packages/ui/components/ColorPicker.wrn": "bc55991a3d98d2018a0c9c125f399d519a7240d7a3c769460500b70ca7f6bf3a",
     "packages/ui/components/Columns.wrn": "8ccd9e53f6799b09f8b996740d12e4e73ee782f6fd3e57595c6c16f788b9b812",
-    "packages/ui/components/Combobox.wrn": "58488dbb60e41dacbf223afdb4a05abdbec53b7f54cd79a0db659add7057b1c1",
-    "packages/ui/components/Confetti.wrn": "0e81426a3ee8aff672385a5466cf96085c25ba17677a2fef432bcddf13f4d58e",
+    "packages/ui/components/Combobox.wrn": "e6f2ecf84213e3c4343154a3d1b7a9bc46ec5121855cb9fe65b105edd73c261d",
+    "packages/ui/components/Confetti.wrn": "0d3c36e77ac49f23bc02bfc8f338a034348c174e25bbc6a34f70310ccabee7b9",
     "packages/ui/components/Container.wrn": "61c895a9cc0e02d314392e94226bddfae2b8fad074e30a68ba935e6ec9549ea6",
-    "packages/ui/components/ContextMenu.wrn": "1b078b9ac20ce2561167b0e14cec1fc26704c251d7a25021b45e51e1b980946e",
+    "packages/ui/components/ContextMenu.wrn": "0c505787136a608097ba996b0c5e1be45b20be136a00611ec720a5d2c728c91c",
     "packages/ui/components/CustomScrollbar.wrn": "2a3a2719580c21823d079c92ebb000c7a5a7d9d16e3fa9275b8fb7d4449cb437",
-    "packages/ui/components/DataMap.wrn": "338f0d0a3307289dd0387b7fe7ba631fa0b65b6be8c7b9ee3feb2203306f76a3",
-    "packages/ui/components/DataTable.wrn": "e929fdb4e59613878a03fb6a11e09c42f773c06ca7b20e43ae16a266835f2af4",
-    "packages/ui/components/DatePicker.wrn": "cefbbb2abb57ad4c57864a0c65589592a20f9ea1695f9fc7693c3135dd82e71a",
+    "packages/ui/components/DataMap.wrn": "cb6da3ab064ea62ef14a30af42344ca1bb1dd816fec7aea520cbe47133f539ff",
+    "packages/ui/components/DataTable.wrn": "eceac58d7f007066108016cbc196faf381d5a84e4f5f23d2feda217182996248",
+    "packages/ui/components/DatePicker.wrn": "07b2685e311eb8211f81a99a28553783d19b1cd99e4cec591fe4f4953ac3fe6b",
     "packages/ui/components/DeviceFrame.wrn": "c38d25419ee44b05d7c443cc4e854aeeb7a53a9289e374d71834de2dd2e4d979",
-    "packages/ui/components/Divider.wrn": "bfa36cf16ccd48c996bb0b08a438f1b281ea1811049ed69fc7680925b1eba019",
-    "packages/ui/components/DragAndDrop.wrn": "84305f07d43cdb9eff1f63c19458d88b0aec013424d05a49a2cafbecedc60513",
-    "packages/ui/components/Drawer.wrn": "8e65742cda766cbac995798a2a44c21d91d35d2e871d7cee5028e3372406c0b2",
-    "packages/ui/components/Dropdown.wrn": "39842607c9769bb75bb9f027ce16cb9cdbd3b108dfe11f81025b54d54558946e",
+    "packages/ui/components/Divider.wrn": "f806d899bfd2d0b6e40aa226919101002704ddbddf0ee0b5b6a56c2452693660",
+    "packages/ui/components/DragAndDrop.wrn": "86382288ca2bccd8aa853490186fcf3b07e7850587fd0fe5829fd40590b82cc3",
+    "packages/ui/components/Drawer.wrn": "d11c11631b5a6779df1db987dd2da9125202237e5f378d6645dd260809f80cb6",
+    "packages/ui/components/Dropdown.wrn": "4649fa306fe4cd6ced3a8a3b7d46e2d835d7cae0335ee8fce0632ff87fc548c9",
     "packages/ui/components/FeatureCard.wrn": "39d89caab070b2b9ecb554ec6d83aad90aeb5b0daa8ab7c8b2f3c7f9e3350077",
     "packages/ui/components/FeatureGrid.wrn": "af2ff8f8c806091cb5cff3d93c7b121b73a6580ac5c9be3ab357355a09084096",
     "packages/ui/components/FeatureIconCard.wrn": "5f65d64235babc3e653a5695204412202015e6f3ffadca566fc18c7f9ce70428",
-    "packages/ui/components/FileInput.wrn": "611047c362458a4e2513b741cc3ef43fbe54c10ddafc13775e4ff39c9de34931",
-    "packages/ui/components/FileUploadProgress.wrn": "ba00557afebf60e6221385d6efcf08635789328deee6e551fc53fbb71e1f413b",
+    "packages/ui/components/FileInput.wrn": "3071a9231ce3c42555a30ad246841bc5d3a00b2a5475b403ecd5b33130ebadf5",
+    "packages/ui/components/FileUploadProgress.wrn": "645b0c4ce031fdbd70e8534d95d1b8d46fff9f67f5d90d2a7c125a6c656b3584",
     "packages/ui/components/Footer.wrn": "4df610f3f57950b43738c305e8100464326e094140013673d723f3454297f1da",
     "packages/ui/components/Grid.wrn": "83d4f5f2656d539538723f5791ba3c238901432e9d8c55c74f068d3eb5a74517",
     "packages/ui/components/Hero.wrn": "d0311f566a1ffdfb97a8b05c58bce738e3147fe5a3208cb2ef6968e6e178e8d1",
     "packages/ui/components/HeroActions.wrn": "67cd31400ccb6abdbbf16219267dee946b44b064b79f25276d20ceb7d6e8a790",
     "packages/ui/components/Image.wrn": "361179c478d7674c3b998891a366d73de9514fc6cc8786440c6c50b9ef065357",
-    "packages/ui/components/InputGroup.wrn": "9e259d15207500d07ff626f09c2e2f5eaf4e471f805a7bdbec154b1a23ce0f8d",
+    "packages/ui/components/InputGroup.wrn": "a0f570a350b32ffbe9bbeb81a32afab2966ccc5232b3affed4cba2f2a1e7b05e",
     "packages/ui/components/InputNumber.wrn": "069195cc483f3f7d6f305d03fbe5a821906a030376fafb6f0d969e4c95b68fd0",
     "packages/ui/components/Kbd.wrn": "6b402cb93f0fa76bb978d1ba483215f70ec7214b1c5e84b568fa3e26e87ed9d9",
     "packages/ui/components/LayoutSplitter.wrn": "41d070e801a271552023e4392e4c0f67327c61e2e8eaee5f8b87af254b1d79c1",
-    "packages/ui/components/LegendIndicator.wrn": "b2b75a2a5edc20a326c2047d4c81b9cd3f319292a1eec5f4abd5cbafc0677d71",
+    "packages/ui/components/LegendIndicator.wrn": "b01886495cd54be2c3e8ffbe99cfd5d12b4e0e35f5e4134041d45f4ed6057ff8",
     "packages/ui/components/Link.wrn": "13f9d6b403440f4b3c3a9ce4dbefa0d5570eb30ff93f498e49f18baab3e08c1d",
     "packages/ui/components/List.wrn": "5bd7d0b12b2f7dbf730db4030c6e20c6617b0933c1341428bbd6bcdab9ab6073",
-    "packages/ui/components/ListGroup.wrn": "eb7eca762101ea873fd6fa2f12f427580130fba3b21c0448a551b0452997dc92",
-    "packages/ui/components/Map.wrn": "3e6d5de5a21dd050c5c65950d6fb2f89af4024e1856a48f055b65b88fcd7b890",
+    "packages/ui/components/ListGroup.wrn": "dd52c1f564b8ef3293269b3aab15b72ca737c8ce9866d0070574ca5469aae82d",
+    "packages/ui/components/Map.wrn": "f09651baad892640a8d822c7f13541311b3de7f6259252bfacf937580fab3a44",
     "packages/ui/components/MarketingSectionHeader.wrn": "39b79499b77dc1c7d34e4e5ecb45a9ddc6182f78c2a2586671c4fa07f44679ad",
     "packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b",
     "packages/ui/components/MegaMenu.wrn": "3f37ee6b7c0d14bf550e8c828f1902be86969969354307efe5b61c1d727ce942",
-    "packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5",
+    "packages/ui/components/MetricCard.wrn": "f195a9413591000f0ce9265f58cb45ae7a67ac08134213cfae7ffe75d53bab6a",
     "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5",
-    "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2",
+    "packages/ui/components/Modal.wrn": "ddd560010581fb63f6dd8f51ddde9e8e7a5adb781b743c06eae28ac557f662d3",
     "packages/ui/components/Nav.wrn": "c45b0ecb42250f4b3ede33c8932a025f789dda9ef48dbf332459ae458163e69a",
-    "packages/ui/components/Navbar.wrn": "f5fe0978d7bae885a8cf8cd27c9dbaf3804d338f675395bd6567926c110fc32a",
-    "packages/ui/components/PageHeader.wrn": "29a93cdca7285548b79ebe5b6421eef6dbb4d5ae8be2508fa2d681e1068ba07f",
-    "packages/ui/components/Pagination.wrn": "d54226705d4556f76ee5f0d6ae82d101ca6d006397756d547a9aa5954415ba39",
-    "packages/ui/components/PinInput.wrn": "4dc398456f6392d7925db941debb484c7cb0358ecef527f696fe5ec4800a7602",
-    "packages/ui/components/Popover.wrn": "1246b99b4236bc7109a5d1427d013bb07bbea7a2da4f821517d2545ee0b5c019",
-    "packages/ui/components/PortalDashboard.wrn": "f04171eb1f8cabef06de3c20e4694b766def3407e1e20d2c9aaebc9bb7da03ee",
-    "packages/ui/components/PreferenceSwitcher.wrn": "519cf911390f529fff3fd16e11fb58e79d618fe851902202dc37552ee1182395",
+    "packages/ui/components/Navbar.wrn": "c9c1290954b1953fd7812d86bc261f4244f1e88eff5d2ebdf0b4a6fcd55df6d9",
+    "packages/ui/components/PageHeader.wrn": "a3e2c59041b9fdbf67188e2f3ea602aec487f22c14c7ca96c3d2b00d17a0725e",
+    "packages/ui/components/Pagination.wrn": "0049cc61f65f0db934cfc2d255656294b6188f29133f8ca0b716332a92595a5d",
+    "packages/ui/components/PinInput.wrn": "9b5112e6dbe1e16448b2a4f87d9f088519779779c9d0ec2bdd34e1e56be7faba",
+    "packages/ui/components/Popover.wrn": "322b6056633fb4f2211d2a67896cb12ae30b0b9f1ff582f6e520fa7ab6fabc86",
+    "packages/ui/components/PortalDashboard.wrn": "dea35ce15889fb673adbd965f11838e83dc937b13e57b00bc0af0c3a5a8ff5c7",
+    "packages/ui/components/PreferenceSwitcher.wrn": "6869b8b2efdbf42d9ec7bc79bd7cdce5997e5623c9aeddb01221f7fe1d2d1c98",
     "packages/ui/components/PublicPageShell.wrn": "3d3f25c03d48f3d3d7e3c567e79cb137c7fce1867e054fd6d440fa1d2e961077",
-    "packages/ui/components/RangeSlider.wrn": "e8ab41782c9d6e58638f0bfccf6e3172af4ebf552189d2199cc6c96bd1652067",
-    "packages/ui/components/Rating.wrn": "902b55c64e3798f3097f09b1558d1a2372f66d4f760662de085783108ee04587",
+    "packages/ui/components/RangeSlider.wrn": "37868f30ef15401d4ba6cca3f54d54ebac71c7bd20728d4bd95f80e844ee607c",
+    "packages/ui/components/Rating.wrn": "fbcc5b9c67ded0e3dc70cb0ab645046b02e27f17f006ded09558e28af6f24c81",
     "packages/ui/components/Scrollspy.wrn": "4b452fcbd524feda9c9f2c81894ee01747a51888e3b86fafb37c5d4d192a3a51",
-    "packages/ui/components/SearchBox.wrn": "3f88340e0b69c0cd552023c72bd22dc511bc00422d46060097bcf0777e683675",
+    "packages/ui/components/SearchBox.wrn": "90f58b7375bae2cf14e31d2c48a8c451f891a823f616c1f01075aca0762543ee",
     "packages/ui/components/Section.wrn": "78da13eb8bc1acafe8e6151cbaeed4baaac2ab860e3209f1d13c467f279d2e68",
-    "packages/ui/components/SectionHeader.wrn": "aca2df8eb35806096f5b9af466b018e5c22a19422e8665f488380da577a0ceb5",
+    "packages/ui/components/SectionHeader.wrn": "428c0c313c562987a4022671246b942d722dd2520b6cadd6f1a7644c7b56d4ee",
     "packages/ui/components/Sidebar.wrn": "ee817a9a46b4d6ab5fea4ebef6d4b28b3ea4599eb7f5b0cc81aa4be1769af792",
     "packages/ui/components/SplitHero.wrn": "7127cb869d1228522d066e028818dd9e512de8b6dd8f99e3dec500e6da5a3cb0",
     "packages/ui/components/StatsBar.wrn": "d4922c94962a957f428fa0e61743a76706ce38698fbf638d065c7fadde0eabe7",
-    "packages/ui/components/Stepper.wrn": "7ec0902acd7cb74b44d490215b6421dae9a41731735ad1e9aec17e8bfc3fa142",
-    "packages/ui/components/StrongPassword.wrn": "82fa3ea0711476e28e349faa35f21567b798c8bccdb4a8d5bbb5610081deab8d",
-    "packages/ui/components/StyledIcon.wrn": "0874f9a234b053a7c8b9c6983be5d664453a64c4576dff1a049101e249a2866d",
+    "packages/ui/components/Stepper.wrn": "07d9a90681b9415696603e06e8cf2aac2692f42fd5744d5655482a6092a5536b",
+    "packages/ui/components/StrongPassword.wrn": "9a2d59169ceed5af09e48412f4b50cf36e66a889317b8e15f01744cc47a8b69f",
+    "packages/ui/components/StyledIcon.wrn": "ca620463eecbf61d5465ca43513b29d7e175bdc784a3debc2f5b1a8d076fd2fa",
     "packages/ui/components/Tabs.wrn": "2ca14d0a87cff3066334f1295fd066a787b84b5667962c1d22fb879b4a68cea6",
     "packages/ui/components/TextLink.wrn": "9d561631c5f65a2bcdc59f5c0b166a5dd794a396f42093f2cd26388386f6f954",
-    "packages/ui/components/TimePicker.wrn": "33bd7a7069b7abe858cf1617b5b950733b37a8d522469ed673cff00b4dfcad0e",
+    "packages/ui/components/TimePicker.wrn": "4b7985fa5cec727a02012763fc7ab8ffee1dee5e54aa512da5bfccde398811c9",
     "packages/ui/components/Timeline.wrn": "7a58a77b1addf2ebbb0eb5dad008bcb49696c4265456d388d1cea71492c76ca6",
-    "packages/ui/components/Toaster.wrn": "5e4c9b2c1bfd5675a81a32e57684b99393ac7fe45d8420c7409a4e95d47d080c",
-    "packages/ui/components/ToggleCount.wrn": "e577195ee05ddb43cceec47145f6b90c0149f2f17055733d58911fcd02de2c7f",
-    "packages/ui/components/TogglePassword.wrn": "26b235de07e3be718fa2aaf07d86558b130f3feaef6e16dbe5916f51766ec378",
+    "packages/ui/components/Toaster.wrn": "de36dad25b30944800ab42d52492f18cbe5eca90ba17e8f70eb25690942d2c60",
+    "packages/ui/components/ToggleCount.wrn": "8370443edb8e15734448e4fd92c0ec3a573980de0402a6adcd24d62567112c4a",
+    "packages/ui/components/TogglePassword.wrn": "3f75a93f607472e73b357fa41b63cd2240b6fd561d03cfd31f92c69944431546",
     "packages/ui/components/TreeView.wrn": "f54d8495730203b923629bcfb167d5ca41236af0101ea2723d33354413555b4b",
     "packages/ui/components/Typography.wrn": "9676af57f2a937b21f45512e0a290b5bee4a16267fbf404850297d29645d88b5",
-    "packages/ui/components/WysiwygEditor.wrn": "a858ebd4e6e2672463ba57d4d049176ca1cc98dac32ab3df3638d6a9cdcd0f2d",
-    "packages/ui/components/alert.wrn": "d42287e41b918b1e19962e9462ef203002eb5480acac984f115b711e9dbe663d",
+    "packages/ui/components/WysiwygEditor.wrn": "6ae997ff6f3835b2ff3e4e3f050bcaa040efddba08fca9dc6d6d2c8d3cf4737b",
+    "packages/ui/components/alert.wrn": "e14e5ca056e27d36816d6949c4c56fbdbe9a881adb15036d6c8749c40dc451dd",
     "packages/ui/components/avatar.wrn": "8bc705e459b13c7f063c57e1506ce540e50fa8ef9020ae85b6e8b6a3579fc5dc",
-    "packages/ui/components/badge.wrn": "0c6cd7725908152bc9f95f9094ecf8e9e57529e569957723e0ab3e32f264d159",
-    "packages/ui/components/button.wrn": "8c6752c9db9605cf94eacacb60d765c21dbf6ddb27ac98065fd3bb4516e32731",
-    "packages/ui/components/checkbox.wrn": "da735354b57f33946591e1bd018b521ff709bae1325e2317735824673188377a",
-    "packages/ui/components/input.wrn": "4fc021d2fe098de556cb8b40e8cc558985af1da198d4dd94cc96d6ac770c18f1",
+    "packages/ui/components/badge.wrn": "f29605b692601d12fb0a9df3ee62d16c35fb03cf6448e3fef4402a56766d6842",
+    "packages/ui/components/button.wrn": "70681183850d5ddc1c0c23c52382ee2d40544c7bd8f0afe9850323f4805bfa31",
+    "packages/ui/components/checkbox.wrn": "67d148bf0482a3161b0393fd7a1aa3a7789de1173272abcdbb650e3a4a1377c7",
+    "packages/ui/components/input.wrn": "a074338ed781e34e020ca5585e73ab6dd6f9cf3ad94bf2911088b38d2ba1dffb",
     "packages/ui/components/progress.wrn": "6307a90585197d7aab19a8710b2430f5d4ed27ce77e9b90b1414ea0eed876492",
-    "packages/ui/components/radio.wrn": "df8e562324b6d99f5a157b0971d63bd715daa0cf6189e7b0d4df04d6f0411388",
-    "packages/ui/components/select.wrn": "c2db58e3648fd7c2b8a741cda61cd38c25954aa386f9657fe96e619cc01f305d",
+    "packages/ui/components/radio.wrn": "deb3412256fdd66128943773bbd7b826c760968cdc51131417038699c35526f8",
+    "packages/ui/components/select.wrn": "499113d8ac4b6d090adc515cac27285ba9cdd8af7ea54f18f61b0086da76e8c0",
     "packages/ui/components/skeleton.wrn": "4fc5e0846eeefd7830c038e1789be995c4f9d833aa913ff079eb4863baa65648",
     "packages/ui/components/spinner.wrn": "2322645da7ef53f7c06035ff071d9a2f6ffe2901ff9338daed84037369367105",
-    "packages/ui/components/switch.wrn": "243f521431ffb644089df7f629bace0c07094638dfdd27e75b2017efa9cbba4f",
-    "packages/ui/components/textarea.wrn": "2effae62f64e99eb4a402abce457c3262107433504719e7ab1c2f5bc91e94fcc",
+    "packages/ui/components/switch.wrn": "471e1bfd99e535818787bb19e35db800d3e24db051417cea89c72b96694ac073",
+    "packages/ui/components/textarea.wrn": "5b2614cf2cb869897d29c359812af3e2b0d6fe278ee2bbf6d99a92521eeaddf2",
     "packages/ui/components/tooltip.wrn": "f3dfdfa5cd9661fe5e95ef3580eef4c7437c069726421370c2d7328fbe7d840d",
-    "packages/ui/styles/SelectStyles.wrn": "074fe0d67de4ef5e9f9cfe879beb72fd5c83352888687d3a1a4b7722c87af3ca",
-    "packages/ui/ui.css": "9ea591404e9cf675bbf1003e15e9fad00327094ff217dc20733f0fc87c0f4a62"
+    "packages/ui/styles/SelectStyles.wrn": "0d000c18419187de9ab5c8bf1b86db1912cd5a4d90591f0da0da3533e10b8baa",
+    "packages/ui/ui.css": "27c2709b6b3a07b4c9a8bef8c2464159a54798a4c76384abd0707135b79ef437"
   }
 }

examples/basic-app/app/styles/global.css

@@ -45,13 +45,7 @@ body {
     Roboto,
     sans-serif;
   color: var(--text);
-  /* Tinted from the primary token so the wash follows the theme too. */
-  background: radial-gradient(
-    1200px 600px at 50% -10%,
-    color-mix(in srgb, var(--wrn-color-primary) 18%, var(--bg)) 0%,
-    var(--bg) 60%
-  );
-  background-color: var(--bg);
+  background: var(--bg);
 }
 
 #app {

examples/component-showcase/app/layouts/gallery.wrn

@@ -0,0 +1,8 @@
+layout Gallery {
+ view {
+  <div class="gallery-shell">
+   <header class="gallery-header"><a href="/preview" class="showcase-brand">WRNexus UI</a><nav aria-label="Main navigation"><a href="/docs">Components</a><a href="/preview">Examples</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav></header>
+   <main class="gallery-main"><slot /></main>
+  </div>
+ }
+}

examples/component-showcase/app/layouts/showcase.wrn

@@ -9,7 +9,7 @@ layout Showcase {
           <label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
         </div>
         <div class="showcase-header-end">
-          <nav aria-label="Primary navigation" class="showcase-nav"><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
+          <nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
           <button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
         </div>
       </header>
@@ -26,24 +26,19 @@ layout Showcase {
         <aside class="docs-directory" data-docs-directory>
           <nav aria-label="Documentation directory">
             <section class="docs-directory-group docs-directory-guides"><strong>Getting Started</strong><div><a href="/docs">Introduction</a><a href="/installation">Installation</a><a href="/framework-guides">Framework guides</a><a href="/accessibility">Accessibility</a><a href="/resources">Resources</a></div></section>
-            <section class="docs-directory-group docs-directory-guides"><strong>WRNexusJS v0.6</strong><div><a href="/v06-types">Types</a><a href="/v06-functions">Functions</a><a href="/v06-outputs">Outputs</a><a href="/v06-stores">Stores</a><a href="/v06-imports">Imports</a><a href="/v06-state">State</a><a href="/v06-runtime">Runtime</a><a href="/v06-migration">Migration</a></div></section>
             <section class="docs-directory-group docs-directory-guides"><strong>Customization</strong><div><a href="/dark-mode">Dark Mode</a><a href="/themes">Themes <small>New</small></a><a href="/colors">Colors <small>New</small></a><a href="/fonts">Fonts</a><a href="/sizing">Sizing</a></div></section>
             
-        <section class="docs-directory-group">
-          <a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
-          <div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
-        </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/base">Base</a>
           <div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/core">Core</a>
-          <div><a data-docs-component-link href="/components/auth-form">Auth Form</a><a data-docs-component-link href="/components/auth-split-layout">Auth Split Layout</a><a data-docs-component-link href="/components/portal-dashboard">Portal Dashboard</a><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
+          <div><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/data">Data</a>
-          <div><a data-docs-component-link href="/components/metric-card">Metric Card</a><a data-docs-component-link href="/components/metric-grid">Metric Grid</a><a data-docs-component-link href="/components/stats-bar">Stats Bar</a></div>
+          <div><a data-docs-component-link href="/components/metric-card">Metric Card</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/forms">Forms</a>
@@ -55,11 +50,11 @@ layout Showcase {
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/layout">Layout</a>
-          <div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/feature-grid">Feature Grid</a><a data-docs-component-link href="/components/footer">Footer</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/public-page-shell">Public Page Shell</a><a data-docs-component-link href="/components/section">Section</a><a data-docs-component-link href="/components/section-header">Section Header</a><a data-docs-component-link href="/components/typography">Typography</a></div>
+          <div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/section">Section</a><a data-docs-component-link href="/components/typography">Typography</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/marketing">Marketing</a>
-          <div><a data-docs-component-link href="/components/announcement-bar">Announcement Bar</a><a data-docs-component-link href="/components/ctasection">CTASection</a><a data-docs-component-link href="/components/feature-card">Feature Card</a><a data-docs-component-link href="/components/feature-icon-card">Feature Icon Card</a><a data-docs-component-link href="/components/hero">Hero</a><a data-docs-component-link href="/components/hero-actions">Hero Actions</a><a data-docs-component-link href="/components/marketing-section-header">Marketing Section Header</a><a data-docs-component-link href="/components/page-header">Page Header</a><a data-docs-component-link href="/components/split-hero">Split Hero</a><a data-docs-component-link href="/components/text-link">Text Link</a></div>
+          <div><a data-docs-component-link href="/components/text-link">Text Link</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/navigation">Navigation</a>
@@ -72,9 +67,13 @@ layout Showcase {
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/tables">Tables</a>
           <div><a data-docs-component-link href="/components/data-table">Data Table</a></div>
+        </section>
+        <section class="docs-directory-group">
+          <a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
+          <div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
         </section>
           </nav>
-          <p class="docs-directory-empty" data-docs-empty>No components found.</p>
+          <p class="docs-directory-empty" data-docs-empty hidden>No components found.</p>
         </aside>
         <main class="showcase-main"><slot /></main>
       </div>

examples/component-showcase/app/pages/accessibility.wrn

@@ -9,6 +9,8 @@ page AccessibilityGuide {
       <nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>Accessibility</span></nav>
       <header class="docs-intro"><span class="showcase-eyebrow">Getting Started</span><h1>Accessibility</h1><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></header>
       <section class="guide-section"><h2>Overview</h2><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
+      <section class="guide-section"><h2>Label controls and explain errors</h2><p>Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.</p><pre><code>&lt;Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." /&gt;
+&lt;Button label="Save changes" disabled="true" /&gt;</code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
       
       <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
     </article>

examples/component-showcase/app/pages/advanced-forms.wrn

@@ -60,13 +60,13 @@ page AdvancedFormsShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Strong Password</h2><p>Theme-aware, responsive strong password component.</p></div>
-          <div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/strong-password">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>29 props · 0 slots</span><a href="/components/strong-password">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="sample-1" firstLabel="Toggle Count" secondLabel="Toggle Count" ariaLabel="Toggle Count 1 example" items='[{"id":"toggle-count-0-1","key":"toggle-count-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#toggle-count-demo","actionHref":"#toggle-count-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"toggle-count-0-2","key":"toggle-count-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#toggle-count-demo","actionHref":"#toggle-count-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
+          <div class="catalog-card-stage"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div>
@@ -80,7 +80,7 @@ page AdvancedFormsShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Password</h2><p>Accessible password field with optional show and hide controls.</p></div>
-          <div class="catalog-card-footer"><span>24 props · 0 slots</span><a href="/components/toggle-password">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/toggle-password">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article></div>
   }

examples/component-showcase/app/pages/base.wrn

@@ -10,13 +10,13 @@ page BaseShowcase {
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Base</h1>
       <p class="showcase-description">26 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>26 components</span><span>Multiple use cases</span><span>83 live configurations</span></div>
+      <div class="category-meta"><span>26 components</span><span>Multiple use cases</span><span>85 live configurations</span></div>
     </header>
     <div class="catalog-grid">
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" items='[{"id":"accordion-0-1","key":"accordion-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"accordion-0-2","key":"accordion-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' defaultOpen='[{"id":"accordion-0-1","key":"accordion-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"accordion-0-2","key":"accordion-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' multiple="false" alwaysOpen="false" disabled="false" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
+          <div class="catalog-card-stage"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
@@ -26,7 +26,7 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Alert size="default" variant="soft" class="showcase-instance showcase-instance--1" title="Alert example" description="A polished default alert for a modern application." items='[{"id":"alert-0-1","key":"alert-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"alert-0-2","key":"alert-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"alert-0-1","key":"alert-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"alert-0-2","key":"alert-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' showIcon="true" icon="" dismissible="true" dismissLabel="Alert" linkLabel="Alert" linkHref="#alert-demo" actionLabel="Alert" actionHref="#alert-demo" compact="false" /></div>
+          <div class="catalog-card-stage"><Alert size="default" color="success" variant="soft" class="" radius="md" shadow="none" title="Changes saved" description="Your workspace settings are up to date." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--circle-check]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
@@ -36,7 +36,7 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
@@ -46,7 +46,7 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><AvatarGroup items='[{"id":"avatar-group-0-1","key":"avatar-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' size="md" variant="solid" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Avatar Group" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
@@ -56,11 +56,11 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Badge label="Badge" size="md" variant="solid" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Badge" animated="false" dismissible="true" dismissLabel="Badge" truncate="false" anchorLabel="Badge" /></div>
+          <div class="catalog-card-stage"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
-          <div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -70,7 +70,7 @@ page BaseShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
-          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -80,13 +80,13 @@ page BaseShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p></div>
-          <div class="catalog-card-footer"><span>25 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>26 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><ButtonGroup items='[{"id":"button-group-0-1","key":"button-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' value="sample-1" size="md" variant="default" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 1 example" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
@@ -96,27 +96,27 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Card title="Citizen service" subtitle="Card example" description="Access a trusted online service." actionLabel="Card" actionHref="#card-demo" headerActions='[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' navigation='[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' mobileNavigation="false" alertTitle="Card example" alertDescription="A polished default card for a modern application." empty="false" emptyTitle="Card example" items='[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable messagLine truncated
+          <div class="catalog-card-stage"><Card title="Citizen service" icon="" titleKey="" subtitle="" subtitleKey="" description="Access a trusted online service." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Group related content in a responsive themed surface with title, description, content, and supporting slots.</p></div>
-          <div class="catalog-card-footer"><span>31 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>41 props · 3 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Carousel size="default" title="Carousel example" description="A polished default carousel for a modern application." items='[{"id":"carousel-0-1","key":"carousel-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
-          <div class="catalog-card-footer"><span>22 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>23 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><ChatBubble size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items='[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
@@ -136,7 +136,7 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
@@ -156,17 +156,17 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><FileUploadProgress size="default" label="File Upload Progress" value="36" max="100" showValue="true" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
-          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><LegendIndicator size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items='[{"id":"legend-indicator-0-1","key":"legend-indicator-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Legend Indicator</h2><p>Theme-aware, responsive legend indicator component.</p></div>
@@ -186,11 +186,11 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><ListGroup size="default" title="List Group example" description="A polished default list group for a modern application." items='[{"id":"list-group-0-1","key":"list-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>List Group</h2><p>Theme-aware, responsive list group component.</p></div>
-          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -216,11 +216,11 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Rating size="default" title="Rating example" description="A polished default rating for a modern application." items='[{"id":"rating-0-1","key":"rating-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p></div>
-          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>12 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -246,27 +246,27 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><StyledIcon size="default" title="Styled Icon example" description="A polished default styled icon for a modern application." items='[{"id":"styled-icon-0-1","key":"styled-icon-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#styled-icon-demo","actionHref":"#styled-icon-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"styled-icon-0-2","key":"styled-icon-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#styled-icon-demo","actionHref":"#styled-icon-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--sparkles]" label="Verified" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Styled Icon</h2><p>Theme-aware, responsive styled icon component.</p></div>
-          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" numbered="false" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Present responsive chronological activity, milestones, or workflow status with rich item metadata.</p></div>
-          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><TreeView title="Tree View example" description="A polished default tree view for a modern application." items='[{"id":"tree-view-0-1","key":"tree-view-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"tree-view-0-2","key":"tree-view-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' defaultExpanded='[{"id":"tree-view-0-1","key":"tree-view-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"tree-view-0-2","key":"tree-view-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' size="default" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Tree View</h2><p>Theme-aware, responsive tree view component.</p></div>

examples/component-showcase/app/pages/block-library.wrn

@@ -1,11 +1,5 @@
 page BlockLibrary {
-  layout = "showcase"
-  seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." }
-  view {
-    <div class="page-marketplace page-blocks">
-      <nav class="market-tabs"><a href="#all">All blocks</a><a href="#marketing">Marketing</a><a href="#application">Application UI</a><a href="#ecommerce">Ecommerce</a><a href="#blog">Blog & Articles</a></nav>
-      <header><span class="showcase-eyebrow">Composable sections</span><h1>Ready-to-use UI blocks</h1><p>Complete responsive sections composed exclusively from the components in this library.</p></header>
-      <div class="market-grid"><article class="market-card"><div class="market-preview market-preview--1"><span class="icon-[lucide--layout-template] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Hero sections</h2><p>Hero, actions, product proof, and visual stage.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--2"><span class="icon-[lucide--grid-2x2] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Feature grids</h2><p>Responsive benefits and product capability sections.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--3"><span class="icon-[lucide--badge-dollar-sign] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Pricing sections</h2><p>Tier cards, comparison grids, and CTAs.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--4"><span class="icon-[lucide--panel-left] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Application shells</h2><p>Headers, sidebars, content, and command areas.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--1"><span class="icon-[lucide--chart-no-axes-combined] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Dashboard stats</h2><p>Metrics, trends, filters, and summaries.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--2"><span class="icon-[lucide--shopping-cart] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Ecommerce</small><h2>Checkout panels</h2><p>Cart, address, payment, and order summary.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--3"><span class="icon-[lucide--newspaper] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Blog & Articles</small><h2>Article layouts</h2><p>Editorial headers, content, author, and sharing.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--4"><span class="icon-[lucide--shield-check] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Authentication</h2><p>Sign in, registration, recovery, and verification.</p><a href="/components/grid">View components →</a></div></article></div>
-    </div>
-  }
+ layout = "gallery"
+ seo { title = "UI blocks" }
+ view { <header class="docs-intro"><span class="showcase-eyebrow">Composed sections</span><h1>Ready-to-use blocks</h1><p>Real sections with live previews and complete source code.</p></header><div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></diLine truncated
 }

examples/component-showcase/app/pages/blocks/announcement-bar.wrn

@@ -0,0 +1,10 @@
+page AnnouncementBarBlock {
+ layout = "gallery"
+ 
+ seo { title = "Announcement Bar block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Announcement Bar</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" flush="false" mobileCompact="false" mobileMessageLines="2" hideBadgeOnMobile="false" hideDescriptionOnMobile="false" flushMobile="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page AnnouncementBarExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" flush="false" mobileCompact="false" mobileMessageLines="2" hideBadgeOnMobile="false" hideDescriptionOnMobile="false" flushMobile="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/ctasection.wrn

@@ -0,0 +1,20 @@
+page CTASectionBlock {
+ layout = "gallery"
+ 
+ seo { title = "CTASection block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>CTASection</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[{"id":"ctasection-0-1","key":"ctasection-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></CTASection></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page CTASectionExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[<span>&#123;</span>"id":"ctasection-0-1","key":"ctasection-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"id":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"&gt;&lt;div data-slot="visual"&gt;
+&lt;div class="showcase-visual-panel"&gt;
+  &lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
+  &lt;strong&gt;Composable visual panel&lt;/strong&gt;
+  &lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
+&lt;/div&gt;&lt;/div&gt;&lt;/CTASection&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/feature-card.wrn

@@ -0,0 +1,10 @@
+page FeatureCardBlock {
+ layout = "gallery"
+ 
+ seo { title = "Feature Card block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Card</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureCardExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/feature-grid.wrn

@@ -0,0 +1,10 @@
+page FeatureGridBlock {
+ layout = "gallery"
+ 
+ seo { title = "Feature Grid block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Grid</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><FeatureGrid size="default" items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureGridExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;FeatureGrid size="default" items='[<span>&#123;</span>"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"<span>&#125;</span>,<span>&#123;</span>"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"<span>&#125;</span>,<span>&#123;</span>"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"<span>&#125;</span>]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/feature-icon-card.wrn

@@ -0,0 +1,10 @@
+page FeatureIconCardBlock {
+ layout = "gallery"
+ 
+ seo { title = "Feature Icon Card block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Icon Card</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" clickableSurface="false" descriptionTone="A polished default feature icon card for a modern application." class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureIconCardExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" clickableSurface="false" descriptionTone="A polished default feature icon card for a modern application." class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/footer.wrn

@@ -0,0 +1,10 @@
+page FooterBlock {
+ layout = "gallery"
+ 
+ seo { title = "Footer block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Footer</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><Footer size="default" label="Footer" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="wide" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FooterExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;Footer size="default" label="Footer" items='[<span>&#123;</span>"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[<span>&#123;</span>"label":"Components","href":"/base"<span>&#125;</span>,<span>&#123;</span>"label":"Themes","href":"/themes"<span>&#125;</span>,<span>&#123;</span>"label":"Examples","href":"/blocks"<span>&#125;</span>]<span>&#125;</span>,<span>&#123;</span>"type":"header","label":"Developers","items":[<span>&#123;</span>"label":"Documentation","href":"/docs"<span>&#125;</span>,<span>&#123;</span>"label":"Installation","href":"/installation"<span>&#125;</span>,<span>&#123;</span>"label":"Framework guides","href":"/framework-guides"<span>&#125;</span>]<span>&#125;</span>,<span>&#123;</span>"type":"header","label":"Resources","items":[<span>&#123;</span>"label":"Accessibility","href":"/accessibility"<span>&#125;</span>,<span>&#123;</span>"label":"Design tokens","href":"/colors"<span>&#125;</span>,<span>&#123;</span>"label":"Typography","href":"/fonts"<span>&#125;</span>]<span>&#125;</span>,<span>&#123;</span>"type":"header","label":"Company","items":[<span>&#123;</span>"label":"WorkRoot","href":"https://workroot.in","external":true<span>&#125;</span>,<span>&#123;</span>"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true<span>&#125;</span>]<span>&#125;</span>]' columns="4" maxWidth="wide" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/hero-actions.wrn

@@ -0,0 +1,10 @@
+page HeroActionsBlock {
+ layout = "gallery"
+ 
+ seo { title = "Hero Actions block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero Actions</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroActionsExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;HeroActions actions='[<span>&#123;</span>"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"<span>&#125;</span>,<span>&#123;</span>"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"<span>&#125;</span>]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/hero.wrn

@@ -0,0 +1,20 @@
+page HeroBlock {
+ layout = "gallery"
+ 
+ seo { title = "Hero block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,Line truncated
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></Hero></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[<span>&#123;</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[<span>&#123;</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125Line truncated
+&lt;div class="showcase-visual-panel"&gt;
+  &lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
+  &lt;strong&gt;Composable visual panel&lt;/strong&gt;
+  &lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
+&lt;/div&gt;&lt;/div&gt;&lt;/Hero&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/index.wrn

@@ -0,0 +1,5 @@
+page BlocksIndex {
+ layout = "gallery"
+ seo { title = "UI blocks" }
+ view { <div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></div></a></div> }
+}

examples/component-showcase/app/pages/blocks/marketing-section-header.wrn

@@ -0,0 +1,10 @@
+page MarketingSectionHeaderBlock {
+ layout = "gallery"
+ 
+ seo { title = "Marketing Section Header block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Marketing Section Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page MarketingSectionHeaderExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/metric-grid.wrn

@@ -0,0 +1,10 @@
+page MetricGridBlock {
+ layout = "gallery"
+ 
+ seo { title = "Metric Grid block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Metric Grid</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page MetricGridExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;MetricGrid items='[<span>&#123;</span>"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"<span>&#125;</span>,<span>&#123;</span>"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"<span>&#125;</span>,<span>&#123;</span>"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"<span>&#125;</span>]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/page-header.wrn

@@ -0,0 +1,10 @@
+page PageHeaderBlock {
+ layout = "gallery"
+ 
+ seo { title = "Page Header block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Page Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page PageHeaderExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[<span>&#123;</span>"label":"Home","href":"/","icon":"icon-[lucide--house]"<span>&#125;</span>,<span>&#123;</span>"label":"Components","href":"/base"<span>&#125;</span>,<span>&#123;</span>"label":"Page header","current":true<span>&#125;</span>]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/section-header.wrn

@@ -0,0 +1,10 @@
+page SectionHeaderBlock {
+ layout = "gallery"
+ 
+ seo { title = "Section Header block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Section Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SectionHeaderExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/split-hero.wrn

@@ -0,0 +1,20 @@
+page SplitHeroBlock {
+ layout = "gallery"
+ 
+ seo { title = "Split Hero block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Split Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" flushMobile="false" descriptionWeight="A polished default split hero for a modern application." mobileStack="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></SplitHero></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SplitHeroExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" flushMobile="false" descriptionWeight="A polished default split hero for a modern application." mobileStack="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[<span>&#123;</span>"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>]' trustItems='[<span>&#123;</span>"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#1Line truncated
+&lt;div class="showcase-visual-panel"&gt;
+  &lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
+  &lt;strong&gt;Composable visual panel&lt;/strong&gt;
+  &lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
+&lt;/div&gt;&lt;/div&gt;&lt;/SplitHero&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/blocks/stats-bar.wrn

@@ -0,0 +1,10 @@
+page StatsBarBlock {
+ layout = "gallery"
+ 
+ seo { title = "Stats Bar block" }
+ view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Stats Bar</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page StatsBarExample <span>&#123;</span>
+  view <span>&#123;</span>
+    &lt;StatsBar items='[<span>&#123;</span>"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"<span>&#125;</span>,<span>&#123;</span>"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"<span>&#125;</span>,<span>&#123;</span>"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"<span>&#125;</span>,<span>&#123;</span>"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"<span>&#125;</span>]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre></section> }
+}

examples/component-showcase/app/pages/colors.wrn

@@ -9,6 +9,9 @@ page ColorsGuide {
       <nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>Colors</span></nav>
       <header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Colors</h1><p>Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.</p></header>
       <section class="guide-section"><h2>Brand colors</h2><p>Primary and secondary tokens communicate brand hierarchy.</p></section><section class="guide-section"><h2>Status colors</h2><p>Success, warning, danger, and info preserve their semantic meaning in every palette.</p></section><section class="guide-section"><h2>Component override</h2><p>Pass color="success" or another semantic color to any component.</p></section>
+      <section class="guide-section"><h2>Choose color by meaning</h2><p>Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.</p><pre><code>&lt;Button label="Save" color="primary" /&gt;
+&lt;Button label="Delete record" color="danger" /&gt;
+&lt;Badge label="Active" color="success" /&gt;</code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
       
       <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
     </article>

examples/component-showcase/app/pages/components/announcement-bar.wrn

@@ -1,175 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page AnnouncementBarDetail {
-  layout = "showcase"
-  state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
-  state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
-  state playground_message = ctx.url.searchParams.get("pg_message") ?? "Announcement"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default announcement bar for a modern application."
-  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Announcement Bar"
-  state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#announcement-bar-demo"
-  state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
-  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
-  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Announcement Bar"
-  state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
-  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_width = ctx.url.searchParams.get("pg_width") ?? "wide"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
-  state playground_role = ctx.url.searchParams.get("pg_role") ?? "status"
-  state playground_live = ctx.url.searchParams.get("pg_live") ?? "polite"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Announcement Bar"
-    description = "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Announcement Bar</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>Announcement Bar</h1>
-        <p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p>
-        <div class="detail-badges"><span>19 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AnnouncementBar" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="dismiss">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Announcement Bar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><AnnouncementBar badge='{playground_badge}' badgeIcon='{playground_badgeIcon}' message='{playground_message}' description='{playground_description}' icon='{playground_icon}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' sticky='{playground_sticky}' compact='{playground_compact}' size='{playground_size}' width='{playground_width}' color='{playground_color}' variant='{playground_variant}' role='{playground_role}' live='{playground_live}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;AnnouncementBar
-  description="A polished default announcement bar for a modern application."
-  actionLabel="Announcement Bar"
-  actionHref="#announcement-bar-demo"
-  dismissible="true"
-  dismissLabel="Announcement Bar"
-/&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-announcement-bar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-announcement-bar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-announcement-bar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-message"><span><strong>message</strong><small>string</small></span><input id="playground-announcement-bar-message" name="pg_message" type="text" value="Announcement" /></label><label class="playground-field" for="playground-announcement-bar-description"><span><strong>description</strong><small>string</small></span><input id="playground-announcement-bar-description" name="pg_description" type="text" value="A polished default announcement bar for a modern application." /></label><label class="playground-field" for="playground-announcement-bar-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-announcement-bar-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-announcement-bar-actionLabel" name="pg_actionLabel" type="text" value="Announcement Bar" /></label><label class="playground-field" for="playground-announcement-bar-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-announcement-bar-actionHref" name="pg_actionHref" type="text" value="#announcement-bar-demo" /></label><label class="playground-field" for="playground-announcement-bar-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-announcement-bar-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-announcement-bar-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-announcement-bar-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-announcement-bar-dismissLabel" name="pg_dismissLabel" type="text" value="Announcement Bar" /></label><label class="playground-toggle" for="playground-announcement-bar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-announcement-bar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-announcement-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-announcement-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-announcement-bar-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-announcement-bar-width"><span><strong>width</strong><small>string</small></span><select id="playground-announcement-bar-width" name="pg_width"><option value="wide" selected>wide</option><option value="default">default</option><option value="full">full</option><option value="compact">compact</option></select></label><label class="playground-field" for="playground-announcement-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-announcement-bar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-announcement-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-announcement-bar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="default">default</option><option value="outline">outline</optionLine truncated
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Soft product notice</h2><p>Use a calm, dismissible notice inside a constrained content area.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="announcement-bar-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Soft product notice usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AnnouncementBar
-  badge="Public notice"
-  badgeIcon="icon-[lucide--sparkles]"
-  message="All composite components are now available"
-  description="Review each component and its recommended use cases."
-  actionLabel="View components"
-  actionHref="#components"
-  actionIcon="icon-[lucide--arrow-down]"
-  dismissible="true"
-  dismissLabel="Announcement Bar"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Wide solid announcement</h2><p>Use stronger contrast for important platform or service announcements.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="announcement-bar-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AnnouncementBar badge="Release" message="WRNexusJS UI updates are ready" description="Explore the redesigned responsive components." icon="icon-[lucide--rocket]" actionLabel="Read changes" actionHref="#release" dismissible="true" dismissLabel="Compact example" sticky="false" compact="true" size="sm" width="wide" variant="solid" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Wide solid announcement usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AnnouncementBar
-  badge="Release"
-  message="WRNexusJS UI updates are ready"
-  description="Explore the redesigned responsive components."
-  icon="icon-[lucide--rocket]"
-  actionLabel="Read changes"
-  actionHref="#release"
-  dismissible="true"
-  dismissLabel="Compact example"
-  compact="true"
-  size="sm"
-  width="wide"
-  variant="solid"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width critical alert</h2><p>Use edge-to-edge width for time-sensitive information that applies to the complete page.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="announcement-bar-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AnnouncementBar badge="Service alert" message="Scheduled maintenance tonight" description="Some services may be temporarily unavailable from 23:00 to 23:30." icon="icon-[lucide--triangle-alert]" actionLabel="View status" actionHref="#status" dismissible="true" dismissLabel="Advanced example" sticky="false" compact="false" size="lg" width="full" color="warning" variant="solid" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Full-width critical alert usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AnnouncementBar
-  badge="Service alert"
-  message="Scheduled maintenance tonight"
-  description="Some services may be temporarily unavailable from 23:00 to 23:30."
-  icon="icon-[lucide--triangle-alert]"
-  actionLabel="View status"
-  actionHref="#status"
-  dismissible="true"
-  dismissLabel="Advanced example"
-  size="lg"
-  width="full"
-  color="warning"
-  variant="solid"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AnnouncementBar
-  @dismiss='console.log(payload)'
-/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
-
-const component = document.querySelector("[data-ui-component=\"AnnouncementBar\"], [data-component=\"AnnouncementBar\"]")
-
-if (component) registerOutputHandler(component, "dismiss", (payload) =&gt; <span>&#123;</span>
-  console.log("dismiss", payload)
-<span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>message</code></td><td>string</td><td><code>"Announcement"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--megaphone]"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Dismiss announcement"</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>role</code></td><td>string</td><td><code>"status"</code></td><td>No</td></tr><tr><td><code>live</code></td><td>string</td><td><code>"polite"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#announcement-bar-demo-1">Soft product notice</a><a href="#announcement-bar-demo-2">Wide solid announcement</a><a href="#announcement-bar-demo-3">Full-width critical alert</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <span></span>
-      <a href="/components/ctasection"><small>Next</small><strong>CTASection →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/auth-form.wrn

@@ -1,169 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page AuthFormDetail {
-  layout = "showcase"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_mode = ctx.url.searchParams.get("pg_mode") ?? "sign-in"
-  state playground_action = ctx.url.searchParams.get("pg_action") ?? "#auth-form-demo"
-  state playground_method = ctx.url.searchParams.get("pg_method") ?? "post"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Form example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth form for a modern application."
-  state playground_returnTo = ctx.url.searchParams.get("pg_returnTo") ?? ""
-  state playground_schema = ctx.url.searchParams.get("pg_schema") ?? ""
-  state playground_showRemember = (ctx.url.searchParams.get("pg_showRemember") ?? "true") === "true"
-  state playground_showName = (ctx.url.searchParams.get("pg_showName") ?? "true") === "true"
-  state playground_submitLabel = ctx.url.searchParams.get("pg_submitLabel") ?? "Auth Form"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Auth Form"
-    description = "Reusable auth form component."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Auth Form</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Core component</span>
-        <h1>Auth Form</h1>
-        <p>Reusable auth form component.</p>
-        <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthForm" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="submit,change,input,focus,blur">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Auth Form</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><AuthForm size='{playground_size}' color='{playground_color}' mode='{playground_mode}' action='{playground_action}' method='{playground_method}' title='{playground_title}' description='{playground_description}' returnTo='{playground_returnTo}' schema='{playground_schema}' showRemember='{playground_showRemember}' showName='{playground_showName}' submitLabel='{playground_submitLabel}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;AuthForm
-  action="#auth-form-demo"
-  title="Auth Form example"
-  description="A polished default auth form for a modern application."
-  submitLabel="Auth Form"
-/&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-auth-form-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-form-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-form-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-form-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-form-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-auth-form-mode" name="pg_mode" type="text" value="sign-in" /></label><label class="playground-field" for="playground-auth-form-action"><span><strong>action</strong><small>string</small></span><input id="playground-auth-form-action" name="pg_action" type="text" value="#auth-form-demo" /></label><label class="playground-field" for="playground-auth-form-method"><span><strong>method</strong><small>string</small></span><select id="playground-auth-form-method" name="pg_method"><option value="post" selected>post</option><option value="get">get</option></select></label><label class="playground-field" for="playground-auth-form-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-form-title" name="pg_title" type="text" value="Auth Form example" /></label><label class="playground-field" for="playground-auth-form-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-form-description" name="pg_description" type="text" value="A polished default auth form for a modern application." /></label><label class="playground-field" for="playground-auth-form-returnTo"><span><strong>return To</strong><small>string</small></span><input id="playground-auth-form-returnTo" name="pg_returnTo" type="text" value="" /></label><label class="playground-field" for="playground-auth-form-schema"><span><strong>schema</strong><small>string</small></span><input id="playground-auth-form-schema" name="pg_schema" type="text" value="" /></label><label class="playground-toggle" for="playground-auth-form-showRemember"><span><strong>show Remember</strong><small>boolean</small></span><input id="playground-auth-form-showRemember" name="pg_showRemember" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-auth-form-showName"><span><strong>show Name</strong><small>boolean</small></span><input id="playground-auth-form-showName" name="pg_showName" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-auth-form-submitLabel"><span><strong>submit Label</strong><small>string</small></span><input id="playground-auth-form-submitLabel" name="pg_submitLabel" type="text" value="Auth Form" /></label><label class="playground-field" for="playground-auth-form-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-form-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="auth-form-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AuthForm size="default" action="#auth-form-demo" title="Auth Form example" description="A polished default auth form for a modern application." showRemember="true" showName="true" submitLabel="Auth Form" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Production default usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AuthForm
-  action="#auth-form-demo"
-  title="Auth Form example"
-  description="A polished default auth form for a modern application."
-  submitLabel="Auth Form"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="auth-form-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AuthForm size="sm" action="#auth-form-demo" title="Compact Auth Form" description="A compact configuration for dashboards and dense product surfaces." showRemember="true" showName="true" submitLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact application usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AuthForm
-  size="sm"
-  action="#auth-form-demo"
-  title="Compact Auth Form"
-  description="A compact configuration for dashboards and dense product surfaces."
-  submitLabel="Compact example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="auth-form-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AuthForm size="lg" action="#auth-form-demo" title="Advanced Auth Form" description="A richer configuration demonstrating additional content and hierarchy." showRemember="true" showName="true" submitLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AuthForm
-  size="lg"
-  action="#auth-form-demo"
-  title="Advanced Auth Form"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  submitLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@submit</code><span>Fires when the component emits the submit event.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@focus</code><span>Fires when the interactive control receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the interactive control.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AuthForm
-  @submit='console.log(payload)'
-  @change='console.log(payload)'
-  @input='console.log(payload)'
-  @focus='console.log(payload)'
-  @blur='console.log(payload)'
-/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
-
-const component = document.querySelector("[data-ui-component=\"AuthForm\"], [data-component=\"AuthForm\"]")
-
-if (component) registerOutputHandler(component, "submit", (payload) =&gt; <span>&#123;</span>
-  console.log("submit", payload)
-<span>&#125;</span>)
-
-if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
-  console.log("change", payload)
-<span>&#125;</span>)
-
-if (component) registerOutputHandler(component, "input", (payload) =&gt; <span>&#123;</span>
-  console.log("input", payload)
-<span>&#125;</span>)
-
-if (component) registerOutputHandler(component, "focus", (payload) =&gt; <span>&#123;</span>
-  console.log("focus", payload)
-<span>&#125;</span>)
-
-if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#123;</span>
-  console.log("blur", payload)
-<span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>mode</code></td><td>string</td><td><code>"sign-in"</code></td><td>No</td></tr><tr><td><code>action</code></td><td>string</td><td><code>"/api/auth/login"</code></td><td>No</td></tr><tr><td><code>method</code></td><td>string</td><td><code>"post"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Sign in"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>returnTo</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>schema</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showRemember</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showName</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>submitLabel</code></td><td>string</td><td><code>"Continue"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#auth-form-demo-1">Production default</a><a href="#auth-form-demo-2">Compact application</a><a href="#auth-form-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <span></span>
-      <a href="/components/auth-split-layout"><small>Next</small><strong>Auth Split Layout →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/auth-split-layout.wrn

@@ -1,281 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page AuthSplitLayoutDetail {
-  layout = "showcase"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "Secure identity"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Split Layout example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth split layout for a modern application."
-  state playground_brand = ctx.url.searchParams.get("pg_brand") ?? "Police Management System"
-  state playground_features = JSON.parse(ctx.url.searchParams.get("pg_features") ?? "[{\"label\":\"Team members\",\"values\":[\"5\",\"Unlimited\",\"Unlimited\"]},{\"label\":\"Support\",\"values\":[\"Email\",\"Priority\",\"Dedicated\"]},{\"label\":\"Audit history\",\"values\":[\"7 days\",\"90 days\",\"Custom\"]}]")
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Auth Split Layout"
-    description = "Reusable auth split layout component."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Auth Split Layout</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Core component</span>
-        <h1>Auth Split Layout</h1>
-        <p>Reusable auth split layout component.</p>
-        <div class="detail-badges"><span>8 props</span><span>2 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthSplitLayout" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Auth Split Layout</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><AuthSplitLayout size='{playground_size}' color='{playground_color}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' brand='{playground_brand}' features='{playground_features}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;AuthSplitLayout
-  title="Auth Split Layout example"
-  description="A polished default auth split layout for a modern application."
-  features='[
-    <span>&#123;</span>
-      "label": "Team members",
-      "values": [
-        "5",
-        "Unlimited",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Support",
-      "values": [
-        "Email",
-        "Priority",
-        "Dedicated"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Audit history",
-      "values": [
-        "7 days",
-        "90 days",
-        "Custom"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="aside-extra"&gt;
-    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="form"&gt;
-    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/AuthSplitLayout&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-auth-split-layout-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-split-layout-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-split-layout-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-split-layout-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-split-layout-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-auth-split-layout-eyebrow" name="pg_eyebrow" type="text" value="Secure identity" /></label><label class="playground-field" for="playground-auth-split-layout-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-split-layout-title" name="pg_title" type="text" value="Auth Split Layout example" /></label><label class="playground-field" for="playground-auth-split-layout-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-split-layout-description" name="pg_description" type="text" value="A polished default auth split layout for a modern application." /></label><label class="playground-field" for="playground-auth-split-layout-brand"><span><strong>brand</strong><small>string</small></span><input id="playground-auth-split-layout-brand" name="pg_brand" type="text" value="Police Management System" /></label><label class="playground-field" for="playground-auth-split-layout-features"><span><strong>features</strong><small>unknown[]</small></span><textarea id="playground-auth-split-layout-features" name="pg_features" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "label": "Team members",
-    "values": [
-      "5",
-      "Unlimited",
-      "Unlimited"
-    ]
-  &#125;,
-  &#123;
-    "label": "Support",
-    "values": [
-      "Email",
-      "Priority",
-      "Dedicated"
-    ]
-  &#125;,
-  &#123;
-    "label": "Audit history",
-    "values": [
-      "7 days",
-      "90 days",
-      "Custom"
-    ]
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-auth-split-layout-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-split-layout-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="auth-split-layout-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AuthSplitLayout size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Production default usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AuthSplitLayout
-  title="Auth Split Layout example"
-  description="A polished default auth split layout for a modern application."
-  features='[
-    <span>&#123;</span>
-      "label": "Team members",
-      "values": [
-        "5",
-        "Unlimited",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Support",
-      "values": [
-        "Email",
-        "Priority",
-        "Dedicated"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Audit history",
-      "values": [
-        "7 days",
-        "90 days",
-        "Custom"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="aside-extra"&gt;
-    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="form"&gt;
-    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/AuthSplitLayout&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="auth-split-layout-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AuthSplitLayout size="sm" title="Compact Auth Split Layout" description="A compact configuration for dashboards and dense product surfaces." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact application usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AuthSplitLayout
-  size="sm"
-  title="Compact Auth Split Layout"
-  description="A compact configuration for dashboards and dense product surfaces."
-  features='[
-    <span>&#123;</span>
-      "label": "Team members",
-      "values": [
-        "5",
-        "Unlimited",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Support",
-      "values": [
-        "Email",
-        "Priority",
-        "Dedicated"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Audit history",
-      "values": [
-        "7 days",
-        "90 days",
-        "Custom"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="aside-extra"&gt;
-    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="form"&gt;
-    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/AuthSplitLayout&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="auth-split-layout-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><AuthSplitLayout size="lg" title="Advanced Auth Split Layout" description="A richer configuration demonstrating additional content and hierarchy." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AuthSplitLayout
-  size="lg"
-  title="Advanced Auth Split Layout"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  features='[
-    <span>&#123;</span>
-      "label": "Team members",
-      "values": [
-        "5",
-        "Unlimited",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Support",
-      "values": [
-        "Email",
-        "Priority",
-        "Dedicated"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Audit history",
-      "values": [
-        "7 days",
-        "90 days",
-        "Custom"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="aside-extra"&gt;
-    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="form"&gt;
-    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/AuthSplitLayout&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>"Secure identity"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Welcome back"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>string</td><td><code>"Police Management System"</code></td><td>No</td></tr><tr><td><code>features</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#auth-split-layout-demo-1">Production default</a><a href="#auth-split-layout-demo-2">Compact application</a><a href="#auth-split-layout-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/auth-form"><small>Previous</small><strong>← Auth Form</strong></a>
-      <a href="/components/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/avatar-group.wrn

@@ -1,18 +1,18 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page AvatarGroupDetail {
   layout = "showcase"
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"avatar-group-0-1\",\"key\":\"avatar-group-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#avatar-group-demo\",\"actionHref\":\"#avatar-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"avatar-group-0-2\",\"key\":\"avatar-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#avatar-group-demo\",\"actionHref\":\"#avatar-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"name\":\"Aisha Khan\",\"initials\":\"AK\",\"tooltip\":\"Aisha Khan · Product designer\"},{\"name\":\"Daniel Lee\",\"initials\":\"DL\",\"tooltip\":\"Daniel Lee · Engineer\"},{\"name\":\"Maya Patel\",\"initials\":\"MP\",\"tooltip\":\"Maya Patel · Product manager\"},{\"name\":\"Oliver Reed\",\"initials\":\"OR\",\"tooltip\":\"Oliver Reed · Support\"},{\"name\":\"Sofia Chen\",\"initials\":\"SC\",\"tooltip\":\"Sofia Chen · Operations\"}]")
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
   state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "stack"
-  state playground_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "4")
+  state playground_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "3")
   state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
   state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? ""
   state playground_showTooltips = (ctx.url.searchParams.get("pg_showTooltips") ?? "true") === "true"
-  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Avatar Group"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Avatar Group"
     description = "Theme-aware, responsive avatar group component."
@@ -38,117 +38,41 @@ page AvatarGroupDetail {
           <div class="playground-preview-source" data-playground-preview><AvatarGroup items='{playground_items}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' layout='{playground_layout}' maxVisible='{playground_maxVisible}' columns='{playground_columns}' borderColor='{playground_borderColor}' showTooltips='{playground_showTooltips}' overflowLabel='{playground_overflowLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;AvatarGroup
-  items='[
-    <span>&#123;</span>
-      "id": "avatar-group-0-1",
-      "key": "avatar-group-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "avatar-group-0-2",
-      "key": "avatar-group-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  overflowLabel="Avatar Group"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page AvatarGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "name": "Aisha Khan",
+    "initials": "AK",
+    "tooltip": "Aisha Khan · Product designer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Daniel Lee",
+    "initials": "DL",
+    "tooltip": "Daniel Lee · Engineer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Maya Patel",
+    "initials": "MP",
+    "tooltip": "Maya Patel · Product manager"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Oliver Reed",
+    "initials": "OR",
+    "tooltip": "Oliver Reed · Support"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Sofia Chen",
+    "initials": "SC",
+    "tooltip": "Sofia Chen · Operations"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;AvatarGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      maxVisible="3"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -157,112 +81,31 @@ page AvatarGroupDetail {
           <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "avatar-group-0-1",
-    "key": "avatar-group-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#avatar-group-demo",
-    "actionHref": "#avatar-group-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "name": "Aisha Khan",
+    "initials": "AK",
+    "tooltip": "Aisha Khan · Product designer"
   &#125;,
   &#123;
-    "id": "avatar-group-0-2",
-    "key": "avatar-group-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#avatar-group-demo",
-    "actionHref": "#avatar-group-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "name": "Daniel Lee",
+    "initials": "DL",
+    "tooltip": "Daniel Lee · Engineer"
+  &#125;,
+  &#123;
+    "name": "Maya Patel",
+    "initials": "MP",
+    "tooltip": "Maya Patel · Product manager"
+  &#125;,
+  &#123;
+    "name": "Oliver Reed",
+    "initials": "OR",
+    "tooltip": "Oliver Reed · Support"
+  &#125;,
+  &#123;
+    "name": "Sofia Chen",
+    "initials": "SC",
+    "tooltip": "Sofia Chen · Operations"
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="4" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Avatar Group" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Show remaining members" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -278,121 +121,45 @@ page AvatarGroupDetail {
           <div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-0-1","key":"avatar-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' size="md" variant="solid" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Avatar Group" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AvatarGroup
-  items='[
-    <span>&#123;</span>
-      "id": "avatar-group-0-1",
-      "key": "avatar-group-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "avatar-group-0-2",
-      "key": "avatar-group-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  overflowLabel="Avatar Group"
-/&gt;</code></pre>
+            <pre><code>page AvatarGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "name": "Aisha Khan",
+    "initials": "AK",
+    "tooltip": "Aisha Khan · Product designer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Daniel Lee",
+    "initials": "DL",
+    "tooltip": "Daniel Lee · Engineer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Maya Patel",
+    "initials": "MP",
+    "tooltip": "Maya Patel · Product manager"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Oliver Reed",
+    "initials": "OR",
+    "tooltip": "Oliver Reed · Support"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Sofia Chen",
+    "initials": "SC",
+    "tooltip": "Sofia Chen · Operations"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;AvatarGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      maxVisible="3"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -405,123 +172,46 @@ page AvatarGroupDetail {
           <div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-1-1","key":"avatar-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-1-2","key":"avatar-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' size="sm" variant="secondary" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="sm" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AvatarGroup
-  items='[
-    <span>&#123;</span>
-      "id": "avatar-group-1-1",
-      "key": "avatar-group-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "avatar-group-1-2",
-      "key": "avatar-group-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  size="sm"
-  variant="secondary"
-  overflowLabel="Compact example"
-/&gt;</code></pre>
+            <pre><code>page AvatarGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "name": "Aisha Khan",
+    "initials": "AK",
+    "tooltip": "Aisha Khan · Product designer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Daniel Lee",
+    "initials": "DL",
+    "tooltip": "Daniel Lee · Engineer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Maya Patel",
+    "initials": "MP",
+    "tooltip": "Maya Patel · Product manager"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Oliver Reed",
+    "initials": "OR",
+    "tooltip": "Oliver Reed · Support"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Sofia Chen",
+    "initials": "SC",
+    "tooltip": "Sofia Chen · Operations"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;AvatarGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      size="sm"
+      maxVisible="3"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -534,123 +224,46 @@ page AvatarGroupDetail {
           <div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-2-1","key":"avatar-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"avatar-group-2-2","key":"avatar-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' size="lg" variant="success" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AvatarGroup
-  items='[
-    <span>&#123;</span>
-      "id": "avatar-group-2-1",
-      "key": "avatar-group-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "avatar-group-2-2",
-      "key": "avatar-group-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#avatar-group-demo",
-      "actionHref": "#avatar-group-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  size="lg"
-  variant="success"
-  overflowLabel="Advanced example"
-/&gt;</code></pre>
+            <pre><code>page AvatarGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "name": "Aisha Khan",
+    "initials": "AK",
+    "tooltip": "Aisha Khan · Product designer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Daniel Lee",
+    "initials": "DL",
+    "tooltip": "Daniel Lee · Engineer"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Maya Patel",
+    "initials": "MP",
+    "tooltip": "Maya Patel · Product manager"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Oliver Reed",
+    "initials": "OR",
+    "tooltip": "Oliver Reed · Support"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "name": "Sofia Chen",
+    "initials": "SC",
+    "tooltip": "Sofia Chen · Operations"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;AvatarGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      layout="grid"
+      maxVisible="3"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -2,23 +2,23 @@
 page AvatarDetail {
   layout = "showcase"
   state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
-  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? ""
-  state playground_initials = ctx.url.searchParams.get("pg_initials") ?? ""
+  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Aisha Khan"
+  state playground_initials = ctx.url.searchParams.get("pg_initials") ?? "AK"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
   state playground_status = ctx.url.searchParams.get("pg_status") ?? ""
-  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? "Avatar"
+  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? ""
   state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom"
   state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
   state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
-  state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? "Avatar"
-  state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application."
+  state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? ""
+  state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? "Aisha Khan · Product designer"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? "Aisha Khan"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
   state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Avatar"
     description = "Theme-aware, responsive avatar component."
@@ -45,9 +45,10 @@ page AvatarDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Avatar
-  statusLabel="Avatar"
-  badgeLabel="Avatar"
-  description="A polished default avatar for a modern application."
+  alt="Aisha Khan"
+  initials="AK"
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -55,7 +56,7 @@ page AvatarDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="A polished default avatar for a modern application." /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="Aisha Khan" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="AK" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="Aisha Khan · Product designer" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="Aisha Khan" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -71,14 +72,15 @@ page AvatarDetail {
           <div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  statusLabel="Avatar"
-  badgeLabel="Avatar"
-  description="A polished default avatar for a modern application."
+  alt="Aisha Khan"
+  initials="AK"
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
 /&gt;</code></pre>
           </section>
         </div>
@@ -92,16 +94,16 @@ page AvatarDetail {
           <div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Avatar size="sm" variant="secondary" statusLabel="Compact example" badgeLabel="Compact example" description="A compact configuration for dashboards and dense product surfaces." class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="sm" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
+  alt="Aisha Khan"
+  initials="AK"
   size="sm"
-  variant="secondary"
-  statusLabel="Compact example"
-  badgeLabel="Compact example"
-  description="A compact configuration for dashboards and dense product surfaces."
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
 /&gt;</code></pre>
           </section>
         </div>
@@ -115,16 +117,17 @@ page AvatarDetail {
           <div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Avatar size="lg" variant="success" statusLabel="Advanced example" badgeLabel="Advanced example" description="A richer configuration demonstrating additional content and hierarchy." class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="online" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="Product designer" loading="lazy" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  size="lg"
-  variant="success"
-  statusLabel="Advanced example"
-  badgeLabel="Advanced example"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  alt="Aisha Khan"
+  initials="AK"
+  status="online"
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
+  description="Product designer"
 /&gt;</code></pre>
           </section>
         </div>

examples/component-showcase/app/pages/components/back-to-top.wrn

@@ -2,20 +2,20 @@
 page BackToTopDetail {
   layout = "showcase"
   state playground_threshold = Number(ctx.url.searchParams.get("pg_threshold") ?? "500")
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Back To Top"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Back To Top 1 example"
-  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Back to top"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Scroll back to top"
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "icon-[lucide--arrow-up]"
   state playground_position = ctx.url.searchParams.get("pg_position") ?? "right"
   state playground_offset = ctx.url.searchParams.get("pg_offset") ?? "md"
   state playground_behavior = ctx.url.searchParams.get("pg_behavior") ?? "smooth"
-  state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "true") === "true"
-  state playground_showLabel = (ctx.url.searchParams.get("pg_showLabel") ?? "true") === "true"
+  state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "false") === "true"
+  state playground_showLabel = (ctx.url.searchParams.get("pg_showLabel") ?? "false") === "true"
   state playground_alwaysVisible = (ctx.url.searchParams.get("pg_alwaysVisible") ?? "true") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "round"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Back To Top"
     description = "Provide a responsive floating control that returns long pages to the top and can show scroll progress."
@@ -41,19 +41,14 @@ page BackToTopDetail {
           <div class="playground-preview-source" data-playground-preview><BackToTop threshold='{playground_threshold}' label='{playground_label}' ariaLabel='{playground_ariaLabel}' icon='{playground_icon}' position='{playground_position}' offset='{playground_offset}' behavior='{playground_behavior}' showProgress='{playground_showProgress}' showLabel='{playground_showLabel}' alwaysVisible='{playground_alwaysVisible}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;BackToTop
-  label="Back To Top"
-  ariaLabel="Back To Top 1 example"
-  showProgress="true"
-  showLabel="true"
-/&gt;</code></pre>
+            <pre><code data-playground-code>&lt;BackToTop /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-back-to-top-threshold"><span><strong>threshold</strong><small>number</small></span><input id="playground-back-to-top-threshold" name="pg_threshold" type="number" value="500" /></label><label class="playground-field" for="playground-back-to-top-label"><span><strong>label</strong><small>string</small></span><input id="playground-back-to-top-label" name="pg_label" type="text" value="Back To Top" /></label><label class="playground-field" for="playground-back-to-top-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-back-to-top-ariaLabel" name="pg_ariaLabel" type="text" value="Back To Top 1 example" /></label><label class="playground-field" for="playground-back-to-top-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-back-to-top-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-back-to-top-position"><span><strong>position</strong><small>string</small></span><select id="playground-back-to-top-position" name="pg_position"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option><option value="top">top</option><option value="bottom">bottom</option><option value="start">start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-back-to-top-offset"><span><strong>offset</strong><small>string</small></span><select id="playground-back-to-top-offset" name="pg_offset"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-back-to-top-behavior"><span><strong>behavior</strong><small>string</small></span><select id="playground-back-to-top-behavior" name="pg_behavior"><option value="smooth" selected>smooth</option><option value="auto">auto</option></select></label><label class="playground-toggle" for="playground-back-to-top-showProgress"><span><strong>show Progress</strong><small>boolean</small></span><input id="playground-back-to-top-showProgress" name="pg_showProgress" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-showLabel"><span><strong>show Label</strong><small>boolean</small></span><input id="playground-back-to-top-showLabel" name="pg_showLabel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-alwaysVisible"><span><strong>always Visible</strong><small>boolean</small></span><input id="playground-back-to-top-alwaysVisible" name="pg_alwaysVisible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-back-to-top-size"><span><strong>size</strong><small>string</small></span><select id="playground-back-to-top-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-back-to-top-color"><span><strong>color</strong><small>string</small></span><select id="playground-back-to-top-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-back-to-top-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-back-to-top-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="outline">outline</option><option value="ghost">ghost</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-back-to-top-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-back-to-top-shape" name="pg_shape"><option value="round" selected>round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-back-to-top-class"><span><strong>class</strong><small>string</small></span><input id="playground-back-to-top-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-back-to-top-threshold"><span><strong>threshold</strong><small>number</small></span><input id="playground-back-to-top-threshold" name="pg_threshold" type="number" value="500" /></label><label class="playground-field" for="playground-back-to-top-label"><span><strong>label</strong><small>string</small></span><input id="playground-back-to-top-label" name="pg_label" type="text" value="Back to top" /></label><label class="playground-field" for="playground-back-to-top-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-back-to-top-ariaLabel" name="pg_ariaLabel" type="text" value="Scroll back to top" /></label><label class="playground-field" for="playground-back-to-top-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-back-to-top-icon" name="pg_icon" type="text" value="icon-[lucide--arrow-up]" /></label><label class="playground-field" for="playground-back-to-top-position"><span><strong>position</strong><small>string</small></span><select id="playground-back-to-top-position" name="pg_position"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option><option value="top">top</option><option value="bottom">bottom</option><option value="start">start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-back-to-top-offset"><span><strong>offset</strong><small>string</small></span><select id="playground-back-to-top-offset" name="pg_offset"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-back-to-top-behavior"><span><strong>behavior</strong><small>string</small></span><select id="playground-back-to-top-behavior" name="pg_behavior"><option value="smooth" selected>smooth</option><option value="auto">auto</option></select></label><label class="playground-toggle" for="playground-back-to-top-showProgress"><span><strong>show Progress</strong><small>boolean</small></span><input id="playground-back-to-top-showProgress" name="pg_showProgress" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-showLabel"><span><strong>show Label</strong><small>boolean</small></span><input id="playground-back-to-top-showLabel" name="pg_showLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-alwaysVisible"><span><strong>always Visible</strong><small>boolean</small></span><input id="playground-back-to-top-alwaysVisible" name="pg_alwaysVisible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-back-to-top-size"><span><strong>size</strong><small>string</small></span><select id="playground-back-to-top-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-back-to-top-color"><span><strong>color</strong><small>string</small></span><select id="playground-back-to-top-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-back-to-top-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-back-to-top-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="outline">outline</option><option value="ghost">ghost</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-back-to-top-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-back-to-top-shape" name="pg_shape"><option value="round" selected>round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-back-to-top-class"><span><strong>class</strong><small>string</small></span><input id="playground-back-to-top-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -69,15 +64,11 @@ page BackToTopDetail {
           <div id="back-to-top-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><BackToTop threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="default" variant="solid" shape="round" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="solid" shape="round" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Floating round control usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;BackToTop
-  label="Back To Top"
-  ariaLabel="Back To Top 1 example"
-  showProgress="true"
-  showLabel="true"
   alwaysVisible="true"
 /&gt;</code></pre>
           </section>
@@ -92,17 +83,13 @@ page BackToTopDetail {
           <div id="back-to-top-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Back To Top 2 example" icon="icon-[lucide--arrow-right]" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="sm" variant="soft" shape="pill" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="true" alwaysVisible="true" size="default" color="primary" variant="soft" shape="pill" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Pill control with label usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;BackToTop
-  ariaLabel="Back To Top 2 example"
-  icon="icon-[lucide--arrow-right]"
-  showProgress="true"
   showLabel="true"
   alwaysVisible="true"
-  size="sm"
   variant="soft"
   shape="pill"
 /&gt;</code></pre>
@@ -118,20 +105,15 @@ page BackToTopDetail {
           <div id="back-to-top-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><BackToTop threshold="500" label="Advanced example" ariaLabel="Back To Top 3 example" icon="icon-[lucide--trash-2]" position="left" offset="lg" showProgress="true" showLabel="true" alwaysVisible="true" size="lg" variant="outline" shape="round" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="left" offset="lg" behavior="smooth" showProgress="true" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="outline" shape="round" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Progress-aware control usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;BackToTop
-  label="Advanced example"
-  ariaLabel="Back To Top 3 example"
-  icon="icon-[lucide--trash-2]"
   position="left"
   offset="lg"
   showProgress="true"
-  showLabel="true"
   alwaysVisible="true"
-  size="lg"
   variant="outline"
 /&gt;</code></pre>
           </section>

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

@@ -1,25 +1,26 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page BadgeDetail {
   layout = "showcase"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Badge"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Active"
+  state playground_humanize = (ctx.url.searchParams.get("pg_humanize") ?? "true") === "true"
+  state playground_size = ctx.url.searchParams.get("pg_size") ?? "sm"
+  state playground_color = ctx.url.searchParams.get("pg_color") ?? "success"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "soft"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "pill"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
   state playground_dot = (ctx.url.searchParams.get("pg_dot") ?? "false") === "true"
   state playground_dotOnly = (ctx.url.searchParams.get("pg_dotOnly") ?? "false") === "true"
-  state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Badge"
+  state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Status"
   state playground_animated = (ctx.url.searchParams.get("pg_animated") ?? "false") === "true"
   state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
   state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
-  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
-  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Badge"
+  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "false") === "true"
+  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Remove badge"
   state playground_truncate = (ctx.url.searchParams.get("pg_truncate") ?? "false") === "true"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "12rem"
-  state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? "Badge"
+  state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? ""
   state playground_anchorIcon = ctx.url.searchParams.get("pg_anchorIcon") ?? ""
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "inline"
   state playground_anchorLabelText = ctx.url.searchParams.get("pg_anchorLabelText") ?? "Badge anchor"
@@ -36,7 +37,7 @@ page BadgeDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>Badge</h1>
         <p>Theme-aware, responsive badge component.</p>
-        <div class="detail-badges"><span>22 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>23 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -45,22 +46,22 @@ page BadgeDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Badge label='{playground_label}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' dot='{playground_dot}' dotOnly='{playground_dotOnly}' dotLabel='{playground_dotLabel}' animated='{playground_animated}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' truncate='{playground_truncate}' maxWidth='{playground_maxWidth}' anchorLabel='{playground_anchorLabel}' anchorIcon='{playground_anchorIcon}' placement='{playground_placement}' anchorLabelText='{playground_anchorLabelText}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Badge label='{playground_label}' humanize='{playground_humanize}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' dot='{playground_dot}' dotOnly='{playground_dotOnly}' dotLabel='{playground_dotLabel}' animated='{playground_animated}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' truncate='{playground_truncate}' maxWidth='{playground_maxWidth}' anchorLabel='{playground_anchorLabel}' anchorIcon='{playground_anchorIcon}' placement='{playground_placement}' anchorLabelText='{playground_anchorLabelText}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Badge
-  dotLabel="Badge"
-  dismissible="true"
-  dismissLabel="Badge"
-  anchorLabel="Badge"
+  label="Active"
+  size="sm"
+  color="success"
+  variant="soft"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Badge" /></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-badge-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-badge-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-badge-shape" name="pg_shape"><option value="pill" selected>pill</option><option value="round">round</option><option value="rounded">rounded</option></select></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Badge" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-badge-maxWidth" name="pg_maxWidth"><option value="12rem" selected>12rem</option><option value="cLine truncated
+          <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Active" /></label><label class="playground-toggle" for="playground-badge-humanize"><span><strong>humanize</strong><small>boolean</small></span><input id="playground-badge-humanize" name="pg_humanize" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="sm" selected>sm</option><option value="md">md</option><option value="default">default</option><option value="xs">xs</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="success" selected>success</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-badge-variant" name="pg_variant" type="text" value="soft" /></label><label class="playground-field" for="playground-badge-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-badge-shape" name="pg_shape"><option value="pill" selected>pill</option><option value="round">round</option><option value="rounded">rounded</option></select></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Status" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Remove badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean Line truncated
         </form>
       </div>
     </section>
@@ -76,15 +77,15 @@ page BadgeDetail {
           <div id="badge-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Badge label="Badge" size="md" variant="solid" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Badge" animated="false" dismissible="true" dismissLabel="Badge" truncate="false" anchorLabel="Badge" /></div>
+            <div class="demo-render"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Badge
-  dotLabel="Badge"
-  dismissible="true"
-  dismissLabel="Badge"
-  anchorLabel="Badge"
+  label="Active"
+  size="sm"
+  color="success"
+  variant="soft"
 /&gt;</code></pre>
           </section>
         </div>
@@ -98,19 +99,15 @@ page BadgeDetail {
           <div id="badge-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Badge label="Compact example" size="sm" variant="secondary" class="showcase-instance showcase-instance--2" icon="icon-[lucide--arrow-right]" dot="false" dotOnly="false" dotLabel="Compact example" animated="false" dismissible="true" dismissLabel="Compact example" truncate="false" anchorLabel="Compact example" /></div>
+            <div class="demo-render"><Badge label="In review" humanize="true" size="sm" color="warning" variant="outline" class="showcase-instance showcase-instance--2" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Badge
-  label="Compact example"
+  label="In review"
   size="sm"
-  variant="secondary"
-  icon="icon-[lucide--arrow-right]"
-  dotLabel="Compact example"
-  dismissible="true"
-  dismissLabel="Compact example"
-  anchorLabel="Compact example"
+  color="warning"
+  variant="outline"
 /&gt;</code></pre>
           </section>
         </div>
@@ -124,19 +121,15 @@ page BadgeDetail {
           <div id="badge-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Badge label="Advanced example" size="lg" variant="success" class="showcase-instance showcase-instance--3" icon="icon-[lucide--trash-2]" dot="false" dotOnly="false" dotLabel="Advanced example" animated="false" dismissible="true" dismissLabel="Advanced example" truncate="false" anchorLabel="Advanced example" /></div>
+            <div class="demo-render"><Badge label="Verified" humanize="true" size="sm" color="primary" variant="solid" class="showcase-instance showcase-instance--3" icon="icon-[lucide--check]" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="true" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Badge
-  label="Advanced example"
-  size="lg"
-  variant="success"
-  icon="icon-[lucide--trash-2]"
-  dotLabel="Advanced example"
+  label="Verified"
+  size="sm"
+  icon="icon-[lucide--check]"
   dismissible="true"
-  dismissLabel="Advanced example"
-  anchorLabel="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
@@ -150,7 +143,7 @@ const component = document.querySelector("[data-ui-component=\"Badge\"], [data-c
 if (component) registerOutputHandler(component, "dismiss", (payload) =&gt; <span>&#123;</span>
   console.log("dismiss", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Badge"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"pill"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>dot</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotLabel</code></td><td>string</td><td><code>"Status"</code></td><td>No</td></tr><tr><td><code>animated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Remove badge"</code></td><td>No</td></tr><tr><td><code>truncate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"12rem"</code></td><td>No</td></tr><tr><td><code>anchorLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>anchorIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>anchorLabelText</code></td><td>string</td><td><code>"Badge anchor"</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Badge"</code></td><td>No</td></tr><tr><td><code>humanize</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"pill"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>dot</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotLabel</code></td><td>string</td><td><code>"Status"</code></td><td>No</td></tr><tr><td><code>animated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Remove badge"</code></td><td>No</td></tr><tr><td><code>truncate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"12rem"</code></td><td>No</td></tr><tr><td><code>anchorLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>anchorIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>anchorLabelText</code></td><td>string</td><td><code>"Badge anchor"</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#badge-demo-1">Production default</a><a href="#badge-demo-2">Compact application</a><a href="#badge-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

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

@@ -13,6 +13,7 @@ page BlockquoteDetail {
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_quoteMark = (ctx.url.searchParams.get("pg_quoteMark") ?? "true") === "true"
   state playground_italic = (ctx.url.searchParams.get("pg_italic") ?? "true") === "true"
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Blockquote"
@@ -27,7 +28,7 @@ page BlockquoteDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>Blockquote</h1>
         <p>Theme-aware, responsive blockquote component.</p>
-        <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>14 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -36,7 +37,7 @@ page BlockquoteDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Blockquote quote='{playground_quote}' citation='{playground_citation}' citationTitle='{playground_citationTitle}' citationUrl='{playground_citationUrl}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' size='{playground_size}' color='{playground_color}' align='{playground_align}' variant='{playground_variant}' quoteMark='{playground_quoteMark}' italic='{playground_italic}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Blockquote quote='{playground_quote}' citation='{playground_citation}' citationTitle='{playground_citationTitle}' citationUrl='{playground_citationUrl}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' size='{playground_size}' color='{playground_color}' align='{playground_align}' variant='{playground_variant}' quoteMark='{playground_quoteMark}' italic='{playground_italic}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Blockquote
@@ -48,8 +49,8 @@ page BlockquoteDetail {
           
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="Blockquote example" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-blockquote-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="Blockquote example" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-blockquote-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-blockquote-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -121,7 +122,7 @@ page BlockquoteDetail {
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#api">Props API</a></div>

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

@@ -4,6 +4,7 @@ page BreadcrumbDetail {
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb"
   state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"breadcrumb-0-1\",\"key\":\"breadcrumb-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"breadcrumb-0-2\",\"key\":\"breadcrumb-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
+  state playground_activeIcon = ctx.url.searchParams.get("pg_activeIcon") ?? "icon-[lucide--file-text]"
   state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "chevron"
   state playground_showHome = (ctx.url.searchParams.get("pg_showHome") ?? "true") === "true"
   state playground_homeLabel = ctx.url.searchParams.get("pg_homeLabel") ?? "Breadcrumb"
@@ -26,7 +27,7 @@ page BreadcrumbDetail {
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Breadcrumb</h1>
         <p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</p>
-        <div class="detail-badges"><span>12 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>13 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -35,128 +36,133 @@ page BreadcrumbDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Breadcrumb label='{playground_label}' items='{playground_items}' active='{playground_active}' separator='{playground_separator}' showHome='{playground_showHome}' homeLabel='{playground_homeLabel}' homeHref='{playground_homeHref}' homeIcon='{playground_homeIcon}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Breadcrumb label='{playground_label}' items='{playground_items}' active='{playground_active}' activeIcon='{playground_activeIcon}' separator='{playground_separator}' showHome='{playground_showHome}' homeLabel='{playground_homeLabel}' homeHref='{playground_homeHref}' homeIcon='{playground_homeIcon}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Breadcrumb
-  items='[
-    <span>&#123;</span>
-      "id": "breadcrumb-0-1",
-      "key": "breadcrumb-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "breadcrumb-0-2",
-      "key": "breadcrumb-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showHome="true"
-  homeLabel="Breadcrumb"
-  homeHref="#breadcrumb-demo"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page BreadcrumbExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "breadcrumb-0-1",
+    "key": "breadcrumb-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#breadcrumb-demo",
+    "actionHref": "#breadcrumb-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "breadcrumb-0-2",
+    "key": "breadcrumb-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#breadcrumb-demo",
+    "actionHref": "#breadcrumb-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Breadcrumb
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showHome="true"
+      homeLabel="Breadcrumb"
+      homeHref="#breadcrumb-demo"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
     "id": "breadcrumb-0-1",
@@ -264,7 +270,7 @@ page BreadcrumbDetail {
       "Standard"
     ]
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-activeIcon"><span><strong>active Icon</strong><small>string</small></span><input id="playground-breadcrumb-activeIcon" name="pg_activeIcon" type="text" value="icon-[lucide--file-text]" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -284,27 +290,32 @@ page BreadcrumbDetail {
           </div>
           <section class="demo-code" aria-label="Minimal page trail usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Breadcrumb
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "icon": "icon-[lucide--house]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Components",
-      "href": "/base"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Page header",
-      "current": true
-    <span>&#125;</span>
-  ]'
-  showHome="true"
-  homeLabel="Breadcrumb"
-  homeHref="#breadcrumb-demo"
-  size="small"
-/&gt;</code></pre>
+            <pre><code>page BreadcrumbExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "icon": "icon-[lucide--house]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Components",
+    "href": "/base"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Page header",
+    "current": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Breadcrumb
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showHome="true"
+      homeLabel="Breadcrumb"
+      homeHref="#breadcrumb-demo"
+      size="small"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -321,29 +332,34 @@ page BreadcrumbDetail {
           </div>
           <section class="demo-code" aria-label="Soft navigation trail usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Breadcrumb
-  label="Compact example"
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "icon": "icon-[lucide--house]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Components",
-      "href": "/base"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Page header",
-      "current": true
-    <span>&#125;</span>
-  ]'
-  showHome="true"
-  homeLabel="Compact example"
-  homeHref="#breadcrumb-demo"
-  size="medium"
-  variant="soft"
-/&gt;</code></pre>
+            <pre><code>page BreadcrumbExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "icon": "icon-[lucide--house]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Components",
+    "href": "/base"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Page header",
+    "current": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Breadcrumb
+      label="Compact example"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showHome="true"
+      homeLabel="Compact example"
+      homeHref="#breadcrumb-demo"
+      size="medium"
+      variant="soft"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -360,30 +376,35 @@ page BreadcrumbDetail {
           </div>
           <section class="demo-code" aria-label="Large directory breadcrumb usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Breadcrumb
-  label="Advanced example"
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "icon": "icon-[lucide--house]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Components",
-      "href": "/base"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Page header",
-      "current": true
-    <span>&#125;</span>
-  ]'
-  separator="slash"
-  showHome="true"
-  homeLabel="Advanced example"
-  homeHref="#breadcrumb-demo"
-  size="large"
-  variant="outline"
-/&gt;</code></pre>
+            <pre><code>page BreadcrumbExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "icon": "icon-[lucide--house]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Components",
+    "href": "/base"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Page header",
+    "current": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Breadcrumb
+      label="Advanced example"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      separator="slash"
+      showHome="true"
+      homeLabel="Advanced example"
+      homeHref="#breadcrumb-demo"
+      size="large"
+      variant="outline"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -396,7 +417,7 @@ const component = document.querySelector("[data-ui-component=\"Breadcrumb\"], [d
 if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
   console.log("select", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>"chevron"</code></td><td>No</td></tr><tr><td><code>showHome</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>homeLabel</code></td><td>string</td><td><code>"Home"</code></td><td>No</td></tr><tr><td><code>homeHref</code></td><td>string</td><td><code>"/"</code></td><td>No</td></tr><tr><td><code>homeIcon</code></td><td>string</td><td><code>"icon-[lucide--house]"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"minimal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>activeIcon</code></td><td>string</td><td><code>"icon-[lucide--file-text]"</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>"chevron"</code></td><td>No</td></tr><tr><td><code>showHome</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>homeLabel</code></td><td>string</td><td><code>"Home"</code></td><td>No</td></tr><tr><td><code>homeHref</code></td><td>string</td><td><code>"/"</code></td><td>No</td></tr><tr><td><code>homeIcon</code></td><td>string</td><td><code>"icon-[lucide--house]"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"minimal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Minimal page trail</a><a href="#breadcrumb-demo-2">Soft navigation trail</a><a href="#breadcrumb-demo-3">Large directory breadcrumb</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/button-group.wrn

@@ -1,19 +1,19 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ButtonGroupDetail {
   layout = "showcase"
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"button-group-0-1\",\"key\":\"button-group-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#button-group-demo\",\"actionHref\":\"#button-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"button-group-0-2\",\"key\":\"button-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#button-group-demo\",\"actionHref\":\"#button-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Day\",\"value\":\"day\"},{\"label\":\"Week\",\"value\":\"week\"},{\"label\":\"Month\",\"value\":\"month\"}]")
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "week"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_responsive = (ctx.url.searchParams.get("pg_responsive") ?? "false") === "true"
   state playground_attached = (ctx.url.searchParams.get("pg_attached") ?? "true") === "true"
-  state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "false") === "true"
+  state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "true") === "true"
   state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "false") === "true"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button Group 1 example"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Button Group"
     description = "Theme-aware, responsive button group component."
@@ -39,118 +39,29 @@ page ButtonGroupDetail {
           <div class="playground-preview-source" data-playground-preview><ButtonGroup items='{playground_items}' value='{playground_value}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' orientation='{playground_orientation}' responsive='{playground_responsive}' attached='{playground_attached}' selectable='{playground_selectable}' toolbar='{playground_toolbar}' disabled='{playground_disabled}' ariaLabel='{playground_ariaLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;ButtonGroup
-  items='[
-    <span>&#123;</span>
-      "id": "button-group-0-1",
-      "key": "button-group-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "button-group-0-2",
-      "key": "button-group-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  value="sample-1"
-  ariaLabel="Button Group 1 example"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page ButtonGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Day",
+    "value": "day"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Week",
+    "value": "week"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Month",
+    "value": "month"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ButtonGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="week"
+      selectable="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -159,112 +70,18 @@ page ButtonGroupDetail {
           <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "button-group-0-1",
-    "key": "button-group-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#button-group-demo",
-    "actionHref": "#button-group-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Day",
+    "value": "day"
   &#125;,
   &#123;
-    "id": "button-group-0-2",
-    "key": "button-group-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#button-group-demo",
-    "actionHref": "#button-group-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Week",
+    "value": "week"
+  &#125;,
+  &#123;
+    "label": "Month",
+    "value": "month"
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button Group 1 example" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="week" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button group" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -280,122 +97,33 @@ page ButtonGroupDetail {
           <div id="button-group-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ButtonGroup items='[{"id":"button-group-0-1","key":"button-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' value="sample-1" size="md" variant="default" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 1 example" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    <span>&#123;</span>
-      "id": "button-group-0-1",
-      "key": "button-group-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "button-group-0-2",
-      "key": "button-group-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  value="sample-1"
-  ariaLabel="Button Group 1 example"
-/&gt;</code></pre>
+            <pre><code>page ButtonGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Day",
+    "value": "day"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Week",
+    "value": "week"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Month",
+    "value": "month"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ButtonGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="week"
+      selectable="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -408,124 +136,34 @@ page ButtonGroupDetail {
           <div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ButtonGroup items='[{"id":"button-group-1-1","key":"button-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-1-2","key":"button-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' value="sample-2" size="sm" variant="secondary" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 2 example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="sm" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    <span>&#123;</span>
-      "id": "button-group-1-1",
-      "key": "button-group-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "button-group-1-2",
-      "key": "button-group-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  value="sample-2"
-  size="sm"
-  variant="secondary"
-  ariaLabel="Button Group 2 example"
-/&gt;</code></pre>
+            <pre><code>page ButtonGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Day",
+    "value": "day"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Week",
+    "value": "week"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Month",
+    "value": "month"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ButtonGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="week"
+      size="sm"
+      selectable="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -538,124 +176,34 @@ page ButtonGroupDetail {
           <div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ButtonGroup items='[{"id":"button-group-2-1","key":"button-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"button-group-2-2","key":"button-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' value="sample-3" size="lg" variant="success" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 3 example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="false" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    <span>&#123;</span>
-      "id": "button-group-2-1",
-      "key": "button-group-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "button-group-2-2",
-      "key": "button-group-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#button-group-demo",
-      "actionHref": "#button-group-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  value="sample-3"
-  size="lg"
-  variant="success"
-  ariaLabel="Button Group 3 example"
-/&gt;</code></pre>
+            <pre><code>page ButtonGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Day",
+    "value": "day"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Week",
+    "value": "week"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Month",
+    "value": "month"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ButtonGroup
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="week"
+      attached="false"
+      selectable="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -23,6 +23,7 @@ page ButtonDetail {
   state playground_ariaExpanded = ctx.url.searchParams.get("pg_ariaExpanded") ?? ""
   state playground_ariaControls = ctx.url.searchParams.get("pg_ariaControls") ?? ""
   state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
+  state playground_tooltipPlacement = ctx.url.searchParams.get("pg_tooltipPlacement") ?? "top"
   state playground_autofocus = (ctx.url.searchParams.get("pg_autofocus") ?? "false") === "true"
   state playground_controlClass = ctx.url.searchParams.get("pg_controlClass") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -39,7 +40,7 @@ page ButtonDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>Button</h1>
         <p>Theme-aware, responsive button component.</p>
-        <div class="detail-badges"><span>25 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>26 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -48,7 +49,7 @@ page ButtonDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Button label='{playground_label}' loadingLabel='{playground_loadingLabel}' description='{playground_description}' as='{playground_as}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' type='{playground_type}' variant='{playground_variant}' color='{playground_color}' size='{playground_size}' disabled='{playground_disabled}' loading='{playground_loading}' pill='{playground_pill}' fullWidth='{playground_fullWidth}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' ariaLabel='{playground_ariaLabel}' ariaPressed='{playground_ariaPressed}' ariaExpanded='{playground_ariaExpanded}' ariaControls='{playground_ariaControls}' title='{playground_title}' autofocus='{playground_autofocus}' controlClass='{playground_controlClass}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Button label='{playground_label}' loadingLabel='{playground_loadingLabel}' description='{playground_description}' as='{playground_as}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' type='{playground_type}' variant='{playground_variant}' color='{playground_color}' size='{playground_size}' disabled='{playground_disabled}' loading='{playground_loading}' pill='{playground_pill}' fullWidth='{playground_fullWidth}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' ariaLabel='{playground_ariaLabel}' ariaPressed='{playground_ariaPressed}' ariaExpanded='{playground_ariaExpanded}' ariaControls='{playground_ariaControls}' title='{playground_title}' tooltipPlacement='{playground_tooltipPlacement}' autofocus='{playground_autofocus}' controlClass='{playground_controlClass}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Button
@@ -61,8 +62,8 @@ page ButtonDetail {
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save &amp; Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-button-ariaLabel"><span><strLine truncated
+          <header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save &amp; Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-button-ariaLabel"><span><strLine truncated
         </form>
       </div>
     </section>
@@ -269,7 +270,7 @@ if (component) registerOutputHandler(component, "focus", (payload) =&gt; <span>&
 if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#123;</span>
   console.log("blur", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tooltipPlacement</code></td><td>string</td><td><code>"top"</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Primary action</a><a href="#button-demo-2">Secondary navigation</a><a href="#button-demo-3">Prominent rounded action</a><a href="#button-demo-4">Accessible icon action</a><a href="#button-demo-5">Dangerous action</a><a href="#button-demo-6">Inline action</a><a href="#button-demo-7">Pending action</a><a href="#button-demo-8">Unavailable action</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

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

@@ -3,9 +3,9 @@ page CarouselDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Carousel example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default carousel for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"carousel-0-1\",\"key\":\"carousel-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#carousel-demo\",\"actionHref\":\"#carousel-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"carousel-0-2\",\"key\":\"carousel-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#carousel-demo\",\"actionHref\":\"#carousel-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"title\":\"A space to create\",\"description\":\"Bring your next idea to life.\",\"imageSrc\":\"/showcase-images/green-hero.svg\"},{\"title\":\"Made for teamwork\",\"description\":\"Keep everyone moving together.\",\"imageSrc\":\"/showcase-images/blue-mountain.svg\"},{\"title\":\"Room to grow\",\"description\":\"Build something that matters.\",\"imageSrc\":\"/showcase-images/violet-circle.svg\"}]")
   state playground_activeIndex = Number(ctx.url.searchParams.get("pg_activeIndex") ?? "0")
   state playground_slidesPerView = Number(ctx.url.searchParams.get("pg_slidesPerView") ?? "1")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "0.75rem"
@@ -20,9 +20,10 @@ page CarouselDetail {
   state playground_isSnap = (ctx.url.searchParams.get("pg_isSnap") ?? "false") === "true"
   state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "true") === "true"
   state playground_thumbnails = ctx.url.searchParams.get("pg_thumbnails") ?? "none"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Carousel 1 example"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Product highlights"
+  state playground_framed = (ctx.url.searchParams.get("pg_framed") ?? "false") === "true"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Carousel"
     description = "Theme-aware, responsive carousel component."
@@ -36,7 +37,7 @@ page CarouselDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>Carousel</h1>
         <p>Theme-aware, responsive carousel component.</p>
-        <div class="detail-badges"><span>22 props</span><span>1 slots</span><span>10 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>23 props</span><span>1 slots</span><span>10 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -45,238 +46,59 @@ page CarouselDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Carousel size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' activeIndex='{playground_activeIndex}' slidesPerView='{playground_slidesPerView}' gap='{playground_gap}' showPagination='{playground_showPagination}' isAutoPlay='{playground_isAutoPlay}' autoplayInterval='{playground_autoplayInterval}' isInfiniteLoop='{playground_isInfiniteLoop}' isRTL='{playground_isRTL}' isCentered='{playground_isCentered}' isDraggable='{playground_isDraggable}' isAutoHeight='{playground_isAutoHeight}' isSnap='{playground_isSnap}' showCounter='{playground_showCounter}' thumbnails='{playground_thumbnails}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Carousel size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' activeIndex='{playground_activeIndex}' slidesPerView='{playground_slidesPerView}' gap='{playground_gap}' showPagination='{playground_showPagination}' isAutoPlay='{playground_isAutoPlay}' autoplayInterval='{playground_autoplayInterval}' isInfiniteLoop='{playground_isInfiniteLoop}' isRTL='{playground_isRTL}' isCentered='{playground_isCentered}' isDraggable='{playground_isDraggable}' isAutoHeight='{playground_isAutoHeight}' isSnap='{playground_isSnap}' showCounter='{playground_showCounter}' thumbnails='{playground_thumbnails}' ariaLabel='{playground_ariaLabel}' framed='{playground_framed}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Carousel
-  title="Carousel example"
-  description="A polished default carousel for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "carousel-0-1",
-      "key": "carousel-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "carousel-0-2",
-      "key": "carousel-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showPagination="true"
-  showCounter="true"
-  ariaLabel="Carousel 1 example"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page CarouselExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "title": "A space to create",
+    "description": "Bring your next idea to life.",
+    "imageSrc": "/showcase-images/green-hero.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Made for teamwork",
+    "description": "Keep everyone moving together.",
+    "imageSrc": "/showcase-images/blue-mountain.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Room to grow",
+    "description": "Build something that matters.",
+    "imageSrc": "/showcase-images/violet-circle.svg"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Carousel
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showPagination="true"
+      showCounter="true"
+      ariaLabel="Product highlights"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="Carousel example" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="A polished default carousel for a modern application." /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "carousel-0-1",
-    "key": "carousel-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#carousel-demo",
-    "actionHref": "#carousel-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "title": "A space to create",
+    "description": "Bring your next idea to life.",
+    "imageSrc": "/showcase-images/green-hero.svg"
   &#125;,
   &#123;
-    "id": "carousel-0-2",
-    "key": "carousel-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#carousel-demo",
-    "actionHref": "#carousel-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "title": "Made for teamwork",
+    "description": "Keep everyone moving together.",
+    "imageSrc": "/showcase-images/blue-mountain.svg"
+  &#125;,
+  &#123;
+    "title": "Room to grow",
+    "description": "Build something that matters.",
+    "imageSrc": "/showcase-images/violet-circle.svg"
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Carousel 1 example" /></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Product highlights" /></label><label class="playground-toggle" for="playground-carousel-framed"><span><strong>framed</strong><small>boolean</small></span><input id="playground-carousel-framed" name="pg_framed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="" /></label>Line truncated
         </form>
       </div>
     </section>
@@ -285,398 +107,132 @@ page CarouselDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Full-width, unframed</h2><p>An edge-to-edge carousel without a card, border, or outer padding.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="carousel-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Carousel size="default" title="Carousel example" description="A polished default carousel for a modern application." items='[{"id":"carousel-0-1","key":"carousel-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Full-width, unframed usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  title="Carousel example"
-  description="A polished default carousel for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "carousel-0-1",
-      "key": "carousel-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "carousel-0-2",
-      "key": "carousel-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showPagination="true"
-  showCounter="true"
-  ariaLabel="Carousel 1 example"
-/&gt;</code></pre>
+            <pre><code>page CarouselExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "title": "A space to create",
+    "description": "Bring your next idea to life.",
+    "imageSrc": "/showcase-images/green-hero.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Made for teamwork",
+    "description": "Keep everyone moving together.",
+    "imageSrc": "/showcase-images/blue-mountain.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Room to grow",
+    "description": "Build something that matters.",
+    "imageSrc": "/showcase-images/violet-circle.svg"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Carousel
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showPagination="true"
+      showCounter="true"
+      ariaLabel="Product highlights"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Framed gallery</h2><p>Opt into a contained gallery when the surrounding layout needs it.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="carousel-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Carousel size="sm" title="Compact Carousel" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"carousel-1-1","key":"carousel-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-1-2","key":"carousel-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 2 example" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="true" variant="default" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Framed gallery usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  size="sm"
-  title="Compact Carousel"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "carousel-1-1",
-      "key": "carousel-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "carousel-1-2",
-      "key": "carousel-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showPagination="true"
-  showCounter="true"
-  ariaLabel="Carousel 2 example"
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page CarouselExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "title": "A space to create",
+    "description": "Bring your next idea to life.",
+    "imageSrc": "/showcase-images/green-hero.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Made for teamwork",
+    "description": "Keep everyone moving together.",
+    "imageSrc": "/showcase-images/blue-mountain.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Room to grow",
+    "description": "Build something that matters.",
+    "imageSrc": "/showcase-images/violet-circle.svg"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Carousel
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showPagination="true"
+      showCounter="true"
+      ariaLabel="Product highlights"
+      framed="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Draggable slides</h2><p>Move between slides with dragging, arrows, or pagination.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="carousel-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Carousel size="lg" title="Advanced Carousel" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"carousel-2-1","key":"carousel-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"carousel-2-2","key":"carousel-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 3 example" variant="success" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="true" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Draggable slides usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  size="lg"
-  title="Advanced Carousel"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "carousel-2-1",
-      "key": "carousel-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "carousel-2-2",
-      "key": "carousel-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#carousel-demo",
-      "actionHref": "#carousel-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  showPagination="true"
-  showCounter="true"
-  ariaLabel="Carousel 3 example"
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page CarouselExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "title": "A space to create",
+    "description": "Bring your next idea to life.",
+    "imageSrc": "/showcase-images/green-hero.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Made for teamwork",
+    "description": "Keep everyone moving together.",
+    "imageSrc": "/showcase-images/blue-mountain.svg"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "title": "Room to grow",
+    "description": "Build something that matters.",
+    "imageSrc": "/showcase-images/violet-circle.svg"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Carousel
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showPagination="true"
+      isDraggable="true"
+      showCounter="true"
+      ariaLabel="Product highlights"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -734,10 +290,10 @@ if (component) registerOutputHandler(component, "dragStart", (payload) =&gt; <sp
 if (component) registerOutputHandler(component, "dragEnd", (payload) =&gt; <span>&#123;</span>
   console.log("dragEnd", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>activeIndex</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>slidesPerView</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"0.75rem"</code></td><td>No</td></tr><tr><td><code>showPagination</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoPlay</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoplayInterval</code></td><td>number</td><td><code>4000</code></td><td>No</td></tr><tr><td><code>isInfiniteLoop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isRTL</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isCentered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isDraggable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoHeight</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isSnap</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>thumbnails</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Content carousel"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>activeIndex</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>slidesPerView</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"0.75rem"</code></td><td>No</td></tr><tr><td><code>showPagination</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoPlay</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoplayInterval</code></td><td>number</td><td><code>4000</code></td><td>No</td></tr><tr><td><code>isInfiniteLoop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isRTL</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isCentered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isDraggable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoHeight</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isSnap</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>thumbnails</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Content carousel"</code></td><td>No</td></tr><tr><td><code>framed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#carousel-demo-1">Production default</a><a href="#carousel-demo-2">Compact application</a><a href="#carousel-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#carousel-demo-1">Full-width, unframed</a><a href="#carousel-demo-2">Framed gallery</a><a href="#carousel-demo-3">Draggable slides</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -1,18 +1,20 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ChartDetail {
   layout = "showcase"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chart example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chart for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chart-0-1\",\"key\":\"chart-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"chart-0-2\",\"key\":\"chart-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Weekly activity"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "Completed tasks this week"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Mon\",\"value\":24},{\"label\":\"Tue\",\"value\":38},{\"label\":\"Wed\",\"value\":29},{\"label\":\"Thu\",\"value\":52},{\"label\":\"Fri\",\"value\":45}]")
+  state playground_data = JSON.parse(ctx.url.searchParams.get("pg_data") ?? "[]")
+  state playground_type = ctx.url.searchParams.get("pg_type") ?? ""
   state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value"
   state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label"
-  state playground_height = Number(ctx.url.searchParams.get("pg_height") ?? "240")
-  state playground_showLegend = (ctx.url.searchParams.get("pg_showLegend") ?? "true") === "true"
+  state playground_height = Number(ctx.url.searchParams.get("pg_height") ?? "220")
+  state playground_showLegend = (ctx.url.searchParams.get("pg_showLegend") ?? "false") === "true"
   state playground_showValues = (ctx.url.searchParams.get("pg_showValues") ?? "true") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Chart"
     description = "Theme-aware, responsive chart component."
@@ -26,7 +28,7 @@ page ChartDetail {
         <span class="showcase-eyebrow">Integrations component</span>
         <h1>Chart</h1>
         <p>Theme-aware, responsive chart component.</p>
-        <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>14 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -35,235 +37,72 @@ page ChartDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Chart
-  title="Chart example"
-  description="A polished default chart for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "chart-0-1",
-      "key": "chart-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chart-0-2",
-      "key": "chart-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page ChartExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Mon",
+    "value": 24
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Tue",
+    "value": 38
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Wed",
+    "value": 29
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Thu",
+    "value": 52
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Fri",
+    "value": 45
+  <span>&#125;</span>
+]
+  state data = []
+  view <span>&#123;</span>
+    &lt;Chart
+      title="Weekly activity"
+      description="Completed tasks this week"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      data="<span>&#123;</span>data<span>&#125;</span>"
+      height="220"
+      showLegend="false"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Chart example" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="A polished default chart for a modern application." /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Weekly activity" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="Completed tasks this week" /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "chart-0-1",
-    "key": "chart-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#chart-demo",
-    "actionHref": "#chart-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Mon",
+    "value": 24
   &#125;,
   &#123;
-    "id": "chart-0-2",
-    "key": "chart-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#chart-demo",
-    "actionHref": "#chart-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Tue",
+    "value": 38
+  &#125;,
+  &#123;
+    "label": "Wed",
+    "value": 29
+  &#125;,
+  &#123;
+    "label": "Thu",
+    "value": 52
+  &#125;,
+  &#123;
+    "label": "Fri",
+    "value": 45
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="240" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown[]</small></span><textarea id="playground-chart-data" name="pg_data" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -272,389 +111,101 @@ page ChartDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Pass an array of label/value objects through data.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="chart-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Chart title="Chart example" description="A polished default chart for a modern application." items='[{"id":"chart-0-1","key":"chart-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chart-0-2","key":"chart-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' height="240" showLegend="true" showValues="true" size="default" variant="bar" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Bar chart usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Chart
-  title="Chart example"
-  description="A polished default chart for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "chart-0-1",
-      "key": "chart-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chart-0-2",
-      "key": "chart-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page ChartExample <span>&#123;</span>
+  state items = []
+  state data = [
+  <span>&#123;</span>
+    "label": "Mon",
+    "value": 24
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Tue",
+    "value": 38
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Wed",
+    "value": 29
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Thu",
+    "value": 52
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Fri",
+    "value": 45
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Chart
+      title="Weekly signups"
+      description="Completed tasks this week"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      data="<span>&#123;</span>data<span>&#125;</span>"
+      type="bar"
+      height="220"
+      showLegend="false"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Line chart</h2><p>Use type=line to compare a trend over time.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="chart-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Chart title="Compact Chart" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"chart-1-1","key":"chart-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chart-1-2","key":"chart-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' height="240" showLegend="true" showValues="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Chart title="Monthly revenue" description="Completed tasks this week" items='[]' data='[{"label":"Jan","value":20},{"label":"Feb","value":35},{"label":"Mar","value":28},{"label":"Apr","value":55}]' type="line" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Line chart usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Chart
-  title="Compact Chart"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "chart-1-1",
-      "key": "chart-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chart-1-2",
-      "key": "chart-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  size="sm"
-  variant="secondary"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="chart-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><Chart title="Advanced Chart" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"chart-2-1","key":"chart-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"chart-2-2","key":"chart-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' height="240" showLegend="true" showValues="true" size="lg" variant="success" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Chart
-  title="Advanced Chart"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "chart-2-1",
-      "key": "chart-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chart-2-2",
-      "key": "chart-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#chart-demo",
-      "actionHref": "#chart-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  size="lg"
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page ChartExample <span>&#123;</span>
+  state items = []
+  state data = [
+  <span>&#123;</span>
+    "label": "Jan",
+    "value": 20
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Feb",
+    "value": 35
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Mar",
+    "value": 28
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Apr",
+    "value": 55
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Chart
+      title="Monthly revenue"
+      description="Completed tasks this week"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      data="<span>&#123;</span>data<span>&#125;</span>"
+      type="line"
+      height="220"
+      showLegend="false"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -677,10 +228,10 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) =&gt
 if (component) registerOutputHandler(component, "legendToggle", (payload) =&gt; <span>&#123;</span>
   console.log("legendToggle", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Production default</a><a href="#chart-demo-2">Compact application</a><a href="#chart-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">Line chart</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

examples/component-showcase/app/pages/components/chat-bubble.wrn

@@ -3,15 +3,15 @@ page ChatBubbleDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chat-bubble-0-1\",\"key\":\"chat-bubble-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#chat-bubble-demo\",\"actionHref\":\"#chat-bubble-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"chat-bubble-0-2\",\"key\":\"chat-bubble-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chat-bubble-demo\",\"actionHref\":\"#chat-bubble-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"status\":\"Delivered\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"}]")
   state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
-  state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "true") === "true"
+  state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "false") === "true"
   state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Chat Bubble 1 example"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Chat Bubble"
     description = "Theme-aware, responsive chat bubble component."
@@ -37,235 +37,56 @@ page ChatBubbleDetail {
           <div class="playground-preview-source" data-playground-preview><ChatBubble size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' oneSided='{playground_oneSided}' showAvatars='{playground_showAvatars}' showMetadata='{playground_showMetadata}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;ChatBubble
-  title="Chat Bubble example"
-  description="A polished default chat bubble for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "chat-bubble-0-1",
-      "key": "chat-bubble-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chat-bubble-0-2",
-      "key": "chat-bubble-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showAvatars="true"
-  showMetadata="true"
-  ariaLabel="Chat Bubble 1 example"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page ChatBubbleExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "text": "Hi Maya, is the new dashboard ready to review?",
+    "direction": "incoming",
+    "timestamp": "10:24"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Yes! I have shared the latest version with you.",
+    "direction": "outgoing",
+    "timestamp": "10:25",
+    "status": "Delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Thanks, I will take a look this afternoon.",
+    "direction": "incoming",
+    "timestamp": "10:26"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ChatBubble
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showMetadata="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="Chat Bubble example" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="A polished default chat bubble for a modern application." /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "chat-bubble-0-1",
-    "key": "chat-bubble-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#chat-bubble-demo",
-    "actionHref": "#chat-bubble-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "text": "Hi Maya, is the new dashboard ready to review?",
+    "direction": "incoming",
+    "timestamp": "10:24"
   &#125;,
   &#123;
-    "id": "chat-bubble-0-2",
-    "key": "chat-bubble-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#chat-bubble-demo",
-    "actionHref": "#chat-bubble-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "text": "Yes! I have shared the latest version with you.",
+    "direction": "outgoing",
+    "timestamp": "10:25",
+    "status": "Delivered"
+  &#125;,
+  &#123;
+    "text": "Thanks, I will take a look this afternoon.",
+    "direction": "incoming",
+    "timestamp": "10:26"
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Chat Bubble 1 example" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -281,125 +102,36 @@ page ChatBubbleDetail {
           <div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ChatBubble size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items='[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ChatBubble
-  title="Chat Bubble example"
-  description="A polished default chat bubble for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "chat-bubble-0-1",
-      "key": "chat-bubble-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chat-bubble-0-2",
-      "key": "chat-bubble-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showAvatars="true"
-  showMetadata="true"
-  ariaLabel="Chat Bubble 1 example"
-/&gt;</code></pre>
+            <pre><code>page ChatBubbleExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "text": "Hi Maya, is the new dashboard ready to review?",
+    "direction": "incoming",
+    "timestamp": "10:24"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Yes! I have shared the latest version with you.",
+    "direction": "outgoing",
+    "timestamp": "10:25",
+    "status": "Delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Thanks, I will take a look this afternoon.",
+    "direction": "incoming",
+    "timestamp": "10:26"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ChatBubble
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showMetadata="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -412,127 +144,36 @@ page ChatBubbleDetail {
           <div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ChatBubble size="sm" title="Compact Chat Bubble" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"chat-bubble-1-1","key":"chat-bubble-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-1-2","key":"chat-bubble-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 2 example" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ChatBubble
-  size="sm"
-  title="Compact Chat Bubble"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "chat-bubble-1-1",
-      "key": "chat-bubble-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chat-bubble-1-2",
-      "key": "chat-bubble-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  showAvatars="true"
-  showMetadata="true"
-  ariaLabel="Chat Bubble 2 example"
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page ChatBubbleExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "text": "Hi Maya, is the new dashboard ready to review?",
+    "direction": "incoming",
+    "timestamp": "10:24"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Yes! I have shared the latest version with you.",
+    "direction": "outgoing",
+    "timestamp": "10:25",
+    "status": "Delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Thanks, I will take a look this afternoon.",
+    "direction": "incoming",
+    "timestamp": "10:26"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ChatBubble
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showMetadata="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -545,127 +186,36 @@ page ChatBubbleDetail {
           <div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ChatBubble size="lg" title="Advanced Chat Bubble" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"chat-bubble-2-1","key":"chat-bubble-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"chat-bubble-2-2","key":"chat-bubble-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 3 example" variant="success" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ChatBubble
-  size="lg"
-  title="Advanced Chat Bubble"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "chat-bubble-2-1",
-      "key": "chat-bubble-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "chat-bubble-2-2",
-      "key": "chat-bubble-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#chat-bubble-demo",
-      "actionHref": "#chat-bubble-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  showAvatars="true"
-  showMetadata="true"
-  ariaLabel="Chat Bubble 3 example"
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page ChatBubbleExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "text": "Hi Maya, is the new dashboard ready to review?",
+    "direction": "incoming",
+    "timestamp": "10:24"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Yes! I have shared the latest version with you.",
+    "direction": "outgoing",
+    "timestamp": "10:25",
+    "status": "Delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Thanks, I will take a look this afternoon.",
+    "direction": "incoming",
+    "timestamp": "10:26"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ChatBubble
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      showMetadata="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -1,17 +1,18 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ClipboardDetail {
   layout = "showcase"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Clipboard"
-  state playground_copiedLabel = ctx.url.searchParams.get("pg_copiedLabel") ?? "Clipboard"
-  state playground_errorLabel = ctx.url.searchParams.get("pg_errorLabel") ?? "Clipboard"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Clipboard example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default clipboard for a modern application."
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "npm install @wrnexus/ui"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Copy"
+  state playground_copiedLabel = ctx.url.searchParams.get("pg_copiedLabel") ?? "Copied"
+  state playground_errorLabel = ctx.url.searchParams.get("pg_errorLabel") ?? "Copy failed"
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_iconOnly = (ctx.url.searchParams.get("pg_iconOnly") ?? "false") === "true"
   state playground_code = (ctx.url.searchParams.get("pg_code") ?? "true") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Clipboard"
     description = "Theme-aware, responsive clipboard component."
@@ -25,7 +26,7 @@ page ClipboardDetail {
         <span class="showcase-eyebrow">Integrations component</span>
         <h1>Clipboard</h1>
         <p>Theme-aware, responsive clipboard component.</p>
-        <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -34,24 +35,19 @@ page ClipboardDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Clipboard value='{playground_value}' label='{playground_label}' copiedLabel='{playground_copiedLabel}' errorLabel='{playground_errorLabel}' title='{playground_title}' description='{playground_description}' code='{playground_code}' size='{playground_size}' color='{playground_color}' disabled='{playground_disabled}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Clipboard value='{playground_value}' label='{playground_label}' copiedLabel='{playground_copiedLabel}' errorLabel='{playground_errorLabel}' title='{playground_title}' description='{playground_description}' iconOnly='{playground_iconOnly}' code='{playground_code}' size='{playground_size}' color='{playground_color}' disabled='{playground_disabled}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Clipboard
-  value="sample-1"
-  label="Clipboard"
-  copiedLabel="Clipboard"
-  errorLabel="Clipboard"
-  title="Clipboard example"
-  description="A polished default clipboard for a modern application."
+  value="npm install @wrnexus/ui"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-clipboard-value"><span><strong>value</strong><small>string</small></span><input id="playground-clipboard-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-clipboard-label"><span><strong>label</strong><small>string</small></span><input id="playground-clipboard-label" name="pg_label" type="text" value="Clipboard" /></label><label class="playground-field" for="playground-clipboard-copiedLabel"><span><strong>copied Label</strong><small>string</small></span><input id="playground-clipboard-copiedLabel" name="pg_copiedLabel" type="text" value="Clipboard" /></label><label class="playground-field" for="playground-clipboard-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-clipboard-errorLabel" name="pg_errorLabel" type="text" value="Clipboard" /></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="Clipboard example" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="A polished default clipboard for a modern application." /></label><label class="playground-toggle" for="playground-clipboard-code"><span><strong>code</strong><small>boolean</small></span><input id="playground-clipboard-code" name="pg_code" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-toggle" for="playground-clipboard-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-clipboard-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-clipboard-value"><span><strong>value</strong><small>string</small></span><input id="playground-clipboard-value" name="pg_value" type="text" value="npm install @wrnexus/ui" /></label><label class="playground-field" for="playground-clipboard-label"><span><strong>label</strong><small>string</small></span><input id="playground-clipboard-label" name="pg_label" type="text" value="Copy" /></label><label class="playground-field" for="playground-clipboard-copiedLabel"><span><strong>copied Label</strong><small>string</small></span><input id="playground-clipboard-copiedLabel" name="pg_copiedLabel" type="text" value="Copied" /></label><label class="playground-field" for="playground-clipboard-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-clipboard-errorLabel" name="pg_errorLabel" type="text" value="Copy failed" /></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="" /></label><label class="playground-toggle" for="playground-clipboard-iconOnly"><span><strong>icon Only</strong><small>boolean</small></span><input id="playground-clipboard-iconOnly" name="pg_iconOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-clipboard-code"><span><strong>code</strong><small>boolean</small></span><input id="playground-clipboard-code" name="pg_code" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-toggle" for="playground-clipboard-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-clipboard-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -67,17 +63,12 @@ page ClipboardDetail {
           <div id="clipboard-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Clipboard value="sample-1" label="Clipboard" copiedLabel="Clipboard" errorLabel="Clipboard" title="Clipboard example" description="A polished default clipboard for a modern application." code="true" size="default" disabled="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="false" code="true" size="default" color="primary" disabled="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Clipboard
-  value="sample-1"
-  label="Clipboard"
-  copiedLabel="Clipboard"
-  errorLabel="Clipboard"
-  title="Clipboard example"
-  description="A polished default clipboard for a modern application."
+  value="npm install @wrnexus/ui"
 /&gt;</code></pre>
           </section>
         </div>
@@ -91,18 +82,13 @@ page ClipboardDetail {
           <div id="clipboard-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Clipboard value="sample-2" label="Compact example" copiedLabel="Compact example" errorLabel="Compact example" title="Compact Clipboard" description="A compact configuration for dashboards and dense product surfaces." code="true" size="sm" disabled="false" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Clipboard
-  value="sample-2"
-  label="Compact example"
-  copiedLabel="Compact example"
-  errorLabel="Compact example"
-  title="Compact Clipboard"
-  description="A compact configuration for dashboards and dense product surfaces."
-  size="sm"
+  value="npm install @wrnexus/ui"
+  iconOnly="true"
 /&gt;</code></pre>
           </section>
         </div>
@@ -116,18 +102,13 @@ page ClipboardDetail {
           <div id="clipboard-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Clipboard value="sample-3" label="Advanced example" copiedLabel="Advanced example" errorLabel="Advanced example" title="Advanced Clipboard" description="A richer configuration demonstrating additional content and hierarchy." code="true" size="lg" disabled="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Clipboard
-  value="sample-3"
-  label="Advanced example"
-  copiedLabel="Advanced example"
-  errorLabel="Advanced example"
-  title="Advanced Clipboard"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  size="lg"
+  value="npm install @wrnexus/ui"
+  iconOnly="true"
 /&gt;</code></pre>
           </section>
         </div>
@@ -151,7 +132,7 @@ if (component) registerOutputHandler(component, "success", (payload) =&gt; <span
 if (component) registerOutputHandler(component, "error", (payload) =&gt; <span>&#123;</span>
   console.log("error", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Copy"</code></td><td>No</td></tr><tr><td><code>copiedLabel</code></td><td>string</td><td><code>"Copied"</code></td><td>No</td></tr><tr><td><code>errorLabel</code></td><td>string</td><td><code>"Copy failed"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>code</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Copy"</code></td><td>No</td></tr><tr><td><code>copiedLabel</code></td><td>string</td><td><code>"Copied"</code></td><td>No</td></tr><tr><td><code>errorLabel</code></td><td>string</td><td><code>"Copy failed"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>code</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#clipboard-demo-1">Production default</a><a href="#clipboard-demo-2">Compact application</a><a href="#clipboard-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/color-picker.wrn

@@ -4,11 +4,11 @@ page ColorPickerDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? "brand-color"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Brand color"
   state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "#8b5cf6"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
   state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
@@ -19,7 +19,7 @@ page ColorPickerDetail {
   state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Color Picker"
     description = "Theme-aware, responsive color picker component."
@@ -46,9 +46,9 @@ page ColorPickerDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;ColorPicker
-  label="Color Picker"
-  placeholder="Enter a sample value"
-  value="sample-1"
+  name="brand-color"
+  label="Brand color"
+  value="#8b5cf6"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -56,7 +56,7 @@ page ColorPickerDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Color Picker" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-color-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" vLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="brand-color" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Brand color" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="#8b5cf6" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-color-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" value="true"Line truncated
         </form>
       </div>
     </section>
@@ -72,14 +72,14 @@ page ColorPickerDetail {
           <div id="color-picker-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ColorPicker size="default" label="Color Picker" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#8b5cf6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ColorPicker
-  label="Color Picker"
-  placeholder="Enter a sample value"
-  value="sample-1"
+  name="brand-color"
+  label="Brand color"
+  value="#8b5cf6"
 /&gt;</code></pre>
           </section>
         </div>
@@ -93,17 +93,14 @@ page ColorPickerDetail {
           <div id="color-picker-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ColorPicker size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#14b8a6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ColorPicker
-  size="sm"
-  label="Compact example"
-  placeholder="Enter a sample value"
-  value="sample-2"
-  icon="icon-[lucide--arrow-right]"
-  variant="secondary"
+  name="brand-color"
+  label="Brand color"
+  value="#14b8a6"
 /&gt;</code></pre>
           </section>
         </div>
@@ -117,17 +114,14 @@ page ColorPickerDetail {
           <div id="color-picker-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ColorPicker size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#3b82f6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ColorPicker
-  size="lg"
-  label="Advanced example"
-  placeholder="Search by name, email, or identifier"
-  value="sample-3"
-  icon="icon-[lucide--trash-2]"
-  variant="success"
+  name="brand-color"
+  label="Brand color"
+  value="#3b82f6"
 /&gt;</code></pre>
           </section>
         </div>

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

@@ -1,14 +1,14 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ConfettiDetail {
   layout = "showcase"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Confetti"
-  state playground_duration = Number(ctx.url.searchParams.get("pg_duration") ?? "1200")
-  state playground_count = Number(ctx.url.searchParams.get("pg_count") ?? "3")
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Celebrate milestone"
+  state playground_duration = Number(ctx.url.searchParams.get("pg_duration") ?? "1400")
+  state playground_count = Number(ctx.url.searchParams.get("pg_count") ?? "40")
   state playground_autoStart = (ctx.url.searchParams.get("pg_autoStart") ?? "false") === "true"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Confetti"
     description = "Theme-aware, responsive confetti component."
@@ -35,8 +35,9 @@ page ConfettiDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Confetti
-  label="Confetti"
-  count="3"
+  label="Celebrate milestone"
+  duration="1400"
+  count="40"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -44,7 +45,7 @@ page ConfettiDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-confetti-label"><span><strong>label</strong><small>string</small></span><input id="playground-confetti-label" name="pg_label" type="text" value="Confetti" /></label><label class="playground-field" for="playground-confetti-duration"><span><strong>duration</strong><small>number</small></span><input id="playground-confetti-duration" name="pg_duration" type="number" value="1200" /></label><label class="playground-field" for="playground-confetti-count"><span><strong>count</strong><small>number</small></span><input id="playground-confetti-count" name="pg_count" type="number" value="3" /></label><label class="playground-toggle" for="playground-confetti-autoStart"><span><strong>auto Start</strong><small>boolean</small></span><input id="playground-confetti-autoStart" name="pg_autoStart" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-confetti-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-confetti-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-confetti-label"><span><strong>label</strong><small>string</small></span><input id="playground-confetti-label" name="pg_label" type="text" value="Celebrate milestone" /></label><label class="playground-field" for="playground-confetti-duration"><span><strong>duration</strong><small>number</small></span><input id="playground-confetti-duration" name="pg_duration" type="number" value="1400" /></label><label class="playground-field" for="playground-confetti-count"><span><strong>count</strong><small>number</small></span><input id="playground-confetti-count" name="pg_count" type="number" value="40" /></label><label class="playground-toggle" for="playground-confetti-autoStart"><span><strong>auto Start</strong><small>boolean</small></span><input id="playground-confetti-autoStart" name="pg_autoStart" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-confetti-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-confetti-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -60,13 +61,14 @@ page ConfettiDetail {
           <div id="confetti-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Confetti label="Confetti" duration="1200" count="3" autoStart="false" disabled="false" size="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Confetti
-  label="Confetti"
-  count="3"
+  label="Celebrate milestone"
+  duration="1400"
+  count="40"
 /&gt;</code></pre>
           </section>
         </div>
@@ -80,14 +82,14 @@ page ConfettiDetail {
           <div id="confetti-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Confetti label="Compact example" duration="1200" count="7" autoStart="false" disabled="false" size="sm" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Confetti
-  label="Compact example"
-  count="7"
-  size="sm"
+  label="Celebrate milestone"
+  duration="1400"
+  count="40"
 /&gt;</code></pre>
           </section>
         </div>
@@ -101,14 +103,14 @@ page ConfettiDetail {
           <div id="confetti-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Confetti label="Advanced example" duration="1200" count="11" autoStart="false" disabled="false" size="lg" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Confetti
-  label="Advanced example"
-  count="11"
-  size="lg"
+  label="Celebrate milestone"
+  duration="1400"
+  count="40"
 /&gt;</code></pre>
           </section>
         </div>
@@ -127,7 +129,7 @@ if (component) registerOutputHandler(component, "start", (payload) =&gt; <span>&
 if (component) registerOutputHandler(component, "complete", (payload) =&gt; <span>&#123;</span>
   console.log("complete", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Celebrate"</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>1200</code></td><td>No</td></tr><tr><td><code>count</code></td><td>number</td><td><code>24</code></td><td>No</td></tr><tr><td><code>autoStart</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Celebrate"</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>1200</code></td><td>No</td></tr><tr><td><code>count</code></td><td>number</td><td><code>80</code></td><td>No</td></tr><tr><td><code>autoStart</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#confetti-demo-1">Production default</a><a href="#confetti-demo-2">Compact application</a><a href="#confetti-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/context-menu.wrn

@@ -4,7 +4,7 @@ page ContextMenuDetail {
   state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]")
   state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
   state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
-  state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "click"
+  state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "contextmenu"
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "pointer"
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
@@ -44,128 +44,133 @@ page ContextMenuDetail {
           <div class="playground-preview-source" data-playground-preview><ContextMenu items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' trigger='{playground_trigger}' placement='{playground_placement}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' title='{playground_title}' description='{playground_description}' label='{playground_label}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' minWidth='{playground_minWidth}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div data-slot="trigger"><div class="showcase-context-target">Right-click for contextual actions</div></div></ContextMenu></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;ContextMenu
-  items='[
-    <span>&#123;</span>
-      "id": "context-menu-0-1",
-      "key": "context-menu-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#context-menu-demo",
-      "actionHref": "#context-menu-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "context-menu-0-2",
-      "key": "context-menu-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#context-menu-demo",
-      "actionHref": "#context-menu-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  title="Context Menu example"
-  description="A polished default context menu for a modern application."
-  label="Context Menu"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/ContextMenu&gt;</code></pre>
+            <pre><code data-playground-code>page ContextMenuExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "context-menu-0-1",
+    "key": "context-menu-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#context-menu-demo",
+    "actionHref": "#context-menu-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "context-menu-0-2",
+    "key": "context-menu-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#context-menu-demo",
+    "actionHref": "#context-menu-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ContextMenu
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      title="Context Menu example"
+      description="A polished default context menu for a modern application."
+      label="Context Menu"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/ContextMenu&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -194,7 +199,7 @@ page ContextMenuDetail {
     "icon": "icon-[lucide--trash-2]",
     "danger": true
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-context-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-context-menu-trigger" name="pg_trigger"><option value="click" selected>click</option><option value="contextmenu">contextmenu</option><option value="both">both</option><option value="manual">manual</option><option value="hover">hover</option><option value="focus">focus</option></select></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-context-menu-placement" name="pg_placement"><option value="pointer" selected>pointer</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-context-menu-align"><span><strong>align</strong><small>string</small></span><select id="playground-context-menu-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-context-menu-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-field" for="playground-context-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-context-menu-label" name="pg_label" type="text" value="Context Menu" /></label><label class="playground-toggle" for="playground-context-menu-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-context-menu-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-context-menu-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></labLine truncated
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-context-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-context-menu-trigger" name="pg_trigger"><option value="contextmenu" selected>contextmenu</option><option value="click">click</option><option value="both">both</option><option value="manual">manual</option><option value="hover">hover</option><option value="focus">focus</option></select></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-context-menu-placement" name="pg_placement"><option value="pointer" selected>pointer</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-context-menu-align"><span><strong>align</strong><small>string</small></span><select id="playground-context-menu-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-context-menu-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-field" for="playground-context-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-context-menu-label" name="pg_label" type="text" value="Context Menu" /></label><label class="playground-toggle" for="playground-context-menu-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-context-menu-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-context-menu-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></labLine truncated
         </form>
       </div>
     </section>
@@ -214,43 +219,48 @@ page ContextMenuDetail {
           </div>
           <section class="demo-code" aria-label="Right-click record actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ContextMenu
-  items='[
-    <span>&#123;</span>
-      "label": "Open dashboard",
-      "description": "View the operational workspace",
-      "value": "dashboard",
-      "icon": "icon-[lucide--layout-dashboard]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Share record",
-      "value": "share",
-      "icon": "icon-[lucide--share-2]",
-      "shortcut": "Ctrl S"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "divider"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Delete record",
-      "value": "delete",
-      "icon": "icon-[lucide--trash-2]",
-      "danger": true
-    <span>&#125;</span>
-  ]'
-  title="Record actions"
-  description="Right-click the target surface"
-  label="Context Menu"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;div class="showcase-context-target"&gt;Right-click for contextual actions&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/ContextMenu&gt;</code></pre>
+            <pre><code>page ContextMenuExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "type": "divider"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ContextMenu
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      title="Record actions"
+      description="Right-click the target surface"
+      label="Context Menu"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;div class="showcase-context-target"&gt;Right-click for contextual actions&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/ContextMenu&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -267,48 +277,53 @@ page ContextMenuDetail {
           </div>
           <section class="demo-code" aria-label="Click-triggered compact menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ContextMenu
-  items='[
-    <span>&#123;</span>
-      "label": "Open dashboard",
-      "description": "View the operational workspace",
-      "value": "dashboard",
-      "icon": "icon-[lucide--layout-dashboard]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Share record",
-      "value": "share",
-      "icon": "icon-[lucide--share-2]",
-      "shortcut": "Ctrl S"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "divider"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Delete record",
-      "value": "delete",
-      "icon": "icon-[lucide--trash-2]",
-      "danger": true
-    <span>&#125;</span>
-  ]'
-  trigger="click"
-  align="center"
-  size="sm"
-  variant="secondary"
-  title="Quick actions"
-  description="A compact configuration for dashboards and dense product surfaces."
-  label="Compact example"
-  minWidth="12rem"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;button type="button" class="showcase-action"&gt;Open quick actions&lt;/button&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/ContextMenu&gt;</code></pre>
+            <pre><code>page ContextMenuExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "type": "divider"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ContextMenu
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      trigger="click"
+      align="center"
+      size="sm"
+      variant="secondary"
+      title="Quick actions"
+      description="A compact configuration for dashboards and dense product surfaces."
+      label="Compact example"
+      minWidth="12rem"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;button type="button" class="showcase-action"&gt;Open quick actions&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/ContextMenu&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -325,48 +340,53 @@ page ContextMenuDetail {
           </div>
           <section class="demo-code" aria-label="Pointer and keyboard menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ContextMenu
-  items='[
-    <span>&#123;</span>
-      "label": "Open dashboard",
-      "description": "View the operational workspace",
-      "value": "dashboard",
-      "icon": "icon-[lucide--layout-dashboard]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Share record",
-      "value": "share",
-      "icon": "icon-[lucide--share-2]",
-      "shortcut": "Ctrl S"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "divider"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Delete record",
-      "value": "delete",
-      "icon": "icon-[lucide--trash-2]",
-      "danger": true
-    <span>&#125;</span>
-  ]'
-  trigger="both"
-  placement="bottom-start"
-  align="end"
-  size="lg"
-  variant="soft"
-  title="Accessible actions"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  label="Advanced example"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;button type="button" class="showcase-action"&gt;Click, press Enter, or right-click&lt;/button&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/ContextMenu&gt;</code></pre>
+            <pre><code>page ContextMenuExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "type": "divider"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ContextMenu
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      trigger="both"
+      placement="bottom-start"
+      align="end"
+      size="lg"
+      variant="soft"
+      title="Accessible actions"
+      description="A richer configuration demonstrating additional content and hierarchy."
+      label="Advanced example"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;button type="button" class="showcase-action"&gt;Click, press Enter, or right-click&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/ContextMenu&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -1,774 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page CTASectionDetail {
-  layout = "showcase"
-  state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "CTASection example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default ctasection for a modern application."
-  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
-  state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "CTASection"
-  state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#ctasection-demo"
-  state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
-  state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "CTASection"
-  state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#ctasection-demo"
-  state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
-  state playground_backgroundImage = ctx.url.searchParams.get("pg_backgroundImage") ?? ""
-  state playground_visualImage = ctx.url.searchParams.get("pg_visualImage") ?? ""
-  state playground_visualAlt = ctx.url.searchParams.get("pg_visualAlt") ?? ""
-  state playground_visualIcon = ctx.url.searchParams.get("pg_visualIcon") ?? ""
-  state playground_visualTitle = ctx.url.searchParams.get("pg_visualTitle") ?? "CTASection example"
-  state playground_visualDescription = ctx.url.searchParams.get("pg_visualDescription") ?? "A polished default ctasection for a modern application."
-  state playground_visualItems = JSON.parse(ctx.url.searchParams.get("pg_visualItems") ?? "[{\"id\":\"ctasection-0-1\",\"key\":\"ctasection-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#ctasection-demo\",\"actionHref\":\"#ctasection-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"ctasection-0-2\",\"key\":\"ctasection-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#ctasection-demo\",\"actionHref\":\"#ctasection-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
-  state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
-  state playground_fullBleed = (ctx.url.searchParams.get("pg_fullBleed") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "CTASection"
-    description = "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>CTASection</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>CTASection</h1>
-        <p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p>
-        <div class="detail-badges"><span>25 props</span><span>4 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CTASection" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure CTASection</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><CTASection eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' backgroundImage='{playground_backgroundImage}' visualImage='{playground_visualImage}' visualAlt='{playground_visualAlt}' visualIcon='{playground_visualIcon}' visualTitle='{playground_visualTitle}' visualDescription='{playground_visualDescription}' visualItems='{playground_visualItems}' visualPosition='{playground_visualPosition}' maxWidth='{playground_maxWidth}' fullBleed='{playground_fullBleed}' class='{playground_class}'><div data-slot="visual">
-<div class="showcase-visual-panel">
-  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
-  <strong>Composable visual panel</strong>
-  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
-</div></div></CTASection></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;CTASection
-  title="CTASection example"
-  description="A polished default ctasection for a modern application."
-  align="start"
-  primaryLabel="CTASection"
-  primaryHref="#ctasection-demo"
-  secondaryLabel="CTASection"
-  secondaryHref="#ctasection-demo"
-  visualTitle="CTASection example"
-  visualDescription="A polished default ctasection for a modern application."
-  visualItems='[
-    <span>&#123;</span>
-      "id": "ctasection-0-1",
-      "key": "ctasection-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "ctasection-0-2",
-      "key": "ctasection-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="visual"&gt;
-    &lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/CTASection&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-ctasection-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-ctasection-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-title"><span><strong>title</strong><small>string</small></span><input id="playground-ctasection-title" name="pg_title" type="text" value="CTASection example" /></label><label class="playground-field" for="playground-ctasection-description"><span><strong>description</strong><small>string</small></span><input id="playground-ctasection-description" name="pg_description" type="text" value="A polished default ctasection for a modern application." /></label><label class="playground-field" for="playground-ctasection-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-ctasection-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-align"><span><strong>align</strong><small>string</small></span><select id="playground-ctasection-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="left">left</option><option value="right">right</option><option value="split">split</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-ctasection-size"><span><strong>size</strong><small>string</small></span><select id="playground-ctasection-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-ctasection-color"><span><strong>color</strong><small>string</small></span><select id="playground-ctasection-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-ctasection-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-ctasection-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-ctasection-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-ctasection-primaryLabel" name="pg_primaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-ctasection-primaryHref" name="pg_primaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-ctasection-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-ctasection-secondaryLabel" name="pg_secondaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-ctasection-secondaryHref" name="pg_secondaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-ctasection-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-backgroundImage"><span><strong>background Image</strong><small>string</small></span><input id="playground-ctasection-backgroundImage" name="pg_backgroundImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-ctasection-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualAlt"><span><strong>vLine truncated
-  &#123;
-    "id": "ctasection-0-1",
-    "key": "ctasection-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#ctasection-demo",
-    "actionHref": "#ctasection-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  &#125;,
-  &#123;
-    "id": "ctasection-0-2",
-    "key": "ctasection-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#ctasection-demo",
-    "actionHref": "#ctasection-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-ctasection-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-ctasection-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-ctasection-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-ctasection-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-ctasection-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-ctasection-fullBleed" name="pg_fullBleed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-ctasection-class"><span><strong>class</strong><small>string</small></span><input id="playground-ctasection-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Split conversion CTA</h2><p>Close a major page section with a clear action and supporting visual content.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="ctasection-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[{"id":"ctasection-0-1","key":"ctasection-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"><div data-slot="visual">
-<div class="showcase-visual-panel">
-  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
-  <strong>Composable visual panel</strong>
-  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
-</div></div></CTASection></div>
-          </div>
-          <section class="demo-code" aria-label="Split conversion CTA usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;CTASection
-  eyebrow="Ready to continue"
-  title="Build public pages with reusable components"
-  description="Keep application pages focused on content and business data while the shared UI package owns presentation."
-  icon="icon-[lucide--rocket]"
-  align="split"
-  variant="gradient"
-  primaryLabel="Use these components"
-  primaryHref="#components"
-  primaryIcon="icon-[lucide--blocks]"
-  secondaryLabel="Back to home"
-  secondaryHref="/"
-  secondaryIcon="icon-[lucide--house]"
-  visualTitle="CTASection example"
-  visualDescription="A polished default ctasection for a modern application."
-  visualItems='[
-    <span>&#123;</span>
-      "id": "ctasection-0-1",
-      "key": "ctasection-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "ctasection-0-2",
-      "key": "ctasection-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  maxWidth="full"&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="visual"&gt;
-    &lt;div class="showcase-visual-panel"&gt;
-      &lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
-      &lt;strong&gt;Composable visual panel&lt;/strong&gt;
-      &lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/CTASection&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered signup CTA</h2><p>Use a focused centered CTA after pricing, guides, or product explanations.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="ctasection-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><CTASection eyebrow="Get started" title="Create your first WRNexusJS page" description="Install the framework and compose your application with the component system." icon="icon-[lucide--arrow-right]" align="center" size="sm" variant="solid" primaryLabel="Read installation" primaryHref="/installation" secondaryLabel="Browse examples" secondaryHref="/blocks" visualTitle="Compact CTASection" visualDescription="A compact configuration for dashboards and dense product surfaces." visualItems='[{"id":"ctasection-1-1","key":"ctasection-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"ctasection-1-2","key":"ctasection-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="xl" fullBleed="false" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Centered signup CTA usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;CTASection
-  eyebrow="Get started"
-  title="Create your first WRNexusJS page"
-  description="Install the framework and compose your application with the component system."
-  icon="icon-[lucide--arrow-right]"
-  size="sm"
-  primaryLabel="Read installation"
-  primaryHref="/installation"
-  secondaryLabel="Browse examples"
-  secondaryHref="/blocks"
-  visualTitle="Compact CTASection"
-  visualDescription="A compact configuration for dashboards and dense product surfaces."
-  visualItems='[
-    <span>&#123;</span>
-      "id": "ctasection-1-1",
-      "key": "ctasection-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "ctasection-1-2",
-      "key": "ctasection-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="visual"&gt;
-    &lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/CTASection&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-bleed service CTA</h2><p>Use an edge-to-edge surface for high-priority registration, service, or contact actions.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="ctasection-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><CTASection eyebrow="Citizen account" title="Access services and track requests securely" description="Create an account to submit, track, and manage citizen-service requests." icon="icon-[lucide--trash-2]" align="left" size="lg" variant="solid" primaryLabel="Create account" primaryHref="#register" secondaryLabel="Sign in" secondaryHref="#sign-in" visualIcon="icon-[lucide--shield-check]" visualTitle="Secure public access" visualDescription="One account for requests, certificates, updates, and notifications." visualItems='[{"id":"ctasection-2-1","key":"ctasection-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"ctasection-2-2","key":"ctasection-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' maxWidth="full" fullBleed="true" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Full-bleed service CTA usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;CTASection
-  eyebrow="Citizen account"
-  title="Access services and track requests securely"
-  description="Create an account to submit, track, and manage citizen-service requests."
-  icon="icon-[lucide--trash-2]"
-  align="left"
-  size="lg"
-  primaryLabel="Create account"
-  primaryHref="#register"
-  secondaryLabel="Sign in"
-  secondaryHref="#sign-in"
-  visualIcon="icon-[lucide--shield-check]"
-  visualTitle="Secure public access"
-  visualDescription="One account for requests, certificates, updates, and notifications."
-  visualItems='[
-    <span>&#123;</span>
-      "id": "ctasection-2-1",
-      "key": "ctasection-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "ctasection-2-2",
-      "key": "ctasection-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#ctasection-demo",
-      "actionHref": "#ctasection-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  maxWidth="full"
-  fullBleed="true"&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="visual"&gt;
-    &lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/CTASection&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Ready to get started?"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>"Get started"</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>backgroundImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualItems</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>fullBleed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#ctasection-demo-1">Split conversion CTA</a><a href="#ctasection-demo-2">Centered signup CTA</a><a href="#ctasection-demo-3">Full-bleed service CTA</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/announcement-bar"><small>Previous</small><strong>← Announcement Bar</strong></a>
-      <a href="/components/feature-card"><small>Next</small><strong>Feature Card →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/data-map.wrn

@@ -3,11 +3,11 @@ page DataMapDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Data Map example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default data map for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"data-map-0-1\",\"key\":\"data-map-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#data-map-demo\",\"actionHref\":\"#data-map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"data-map-0-2\",\"key\":\"data-map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#data-map-demo\",\"actionHref\":\"#data-map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Activity by team"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "Select a tile to inspect its activity score."
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Design\",\"value\":32},{\"label\":\"Engineering\",\"value\":84},{\"label\":\"Support\",\"value\":56},{\"label\":\"Sales\",\"value\":45},{\"label\":\"Marketing\",\"value\":68},{\"label\":\"Operations\",\"value\":20}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Data Map"
     description = "Theme-aware, responsive data map component."
@@ -33,232 +33,73 @@ page DataMapDetail {
           <div class="playground-preview-source" data-playground-preview><DataMap size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;DataMap
-  title="Data Map example"
-  description="A polished default data map for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "data-map-0-1",
-      "key": "data-map-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "data-map-0-2",
-      "key": "data-map-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page DataMapExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Design",
+    "value": 32
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Engineering",
+    "value": 84
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Support",
+    "value": 56
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sales",
+    "value": 45
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Marketing",
+    "value": 68
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Operations",
+    "value": 20
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DataMap
+      title="Activity by team"
+      description="Select a tile to inspect its activity score."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Data Map example" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="A polished default data map for a modern application." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Activity by team" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="Select a tile to inspect its activity score." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "data-map-0-1",
-    "key": "data-map-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#data-map-demo",
-    "actionHref": "#data-map-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Design",
+    "value": 32
   &#125;,
   &#123;
-    "id": "data-map-0-2",
-    "key": "data-map-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#data-map-demo",
-    "actionHref": "#data-map-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Engineering",
+    "value": 84
+  &#125;,
+  &#123;
+    "label": "Support",
+    "value": 56
+  &#125;,
+  &#123;
+    "label": "Sales",
+    "value": 45
+  &#125;,
+  &#123;
+    "label": "Marketing",
+    "value": 68
+  &#125;,
+  &#123;
+    "label": "Operations",
+    "value": 20
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -274,122 +115,45 @@ page DataMapDetail {
           <div id="data-map-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DataMap size="default" title="Data Map example" description="A polished default data map for a modern application." items='[{"id":"data-map-0-1","key":"data-map-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"data-map-0-2","key":"data-map-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DataMap
-  title="Data Map example"
-  description="A polished default data map for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "data-map-0-1",
-      "key": "data-map-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "data-map-0-2",
-      "key": "data-map-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page DataMapExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Design",
+    "value": 32
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Engineering",
+    "value": 84
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Support",
+    "value": 56
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sales",
+    "value": 45
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Marketing",
+    "value": 68
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Operations",
+    "value": 20
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DataMap
+      title="Activity by team"
+      description="Select a tile to inspect its activity score."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -402,124 +166,45 @@ page DataMapDetail {
           <div id="data-map-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DataMap size="sm" title="Compact Data Map" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"data-map-1-1","key":"data-map-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"data-map-1-2","key":"data-map-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DataMap
-  size="sm"
-  title="Compact Data Map"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "data-map-1-1",
-      "key": "data-map-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "data-map-1-2",
-      "key": "data-map-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page DataMapExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Design",
+    "value": 32
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Engineering",
+    "value": 84
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Support",
+    "value": 56
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sales",
+    "value": 45
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Marketing",
+    "value": 68
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Operations",
+    "value": 20
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DataMap
+      title="Activity by team"
+      description="Select a tile to inspect its activity score."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -532,124 +217,45 @@ page DataMapDetail {
           <div id="data-map-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DataMap size="lg" title="Advanced Data Map" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"data-map-2-1","key":"data-map-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"data-map-2-2","key":"data-map-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DataMap
-  size="lg"
-  title="Advanced Data Map"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "data-map-2-1",
-      "key": "data-map-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "data-map-2-2",
-      "key": "data-map-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#data-map-demo",
-      "actionHref": "#data-map-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page DataMapExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Design",
+    "value": 32
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Engineering",
+    "value": 84
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Support",
+    "value": 56
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sales",
+    "value": 45
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Marketing",
+    "value": 68
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Operations",
+    "value": 20
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DataMap
+      title="Activity by team"
+      description="Select a tile to inspect its activity score."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

examples/component-showcase/app/pages/components/date-picker.wrn

@@ -6,14 +6,14 @@ page DatePickerDetail {
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker"
   state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
   state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "2026-09-20"
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "date"
   state playground_locale = ctx.url.searchParams.get("pg_locale") ?? "en-US"
   state playground_firstDayOfWeek = Number(ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0")
-  state playground_months = ctx.url.searchParams.get("pg_months") ?? ""
-  state playground_days = ctx.url.searchParams.get("pg_days") ?? ""
-  state playground_years = ctx.url.searchParams.get("pg_years") ?? ""
+  state playground_months = JSON.parse(ctx.url.searchParams.get("pg_months") ?? "[{\"label\":\"Jan\",\"value\":\"01\"},{\"label\":\"Feb\",\"value\":\"02\"},{\"label\":\"Mar\",\"value\":\"03\"},{\"label\":\"Apr\",\"value\":\"04\"},{\"label\":\"May\",\"value\":\"05\"},{\"label\":\"Jun\",\"value\":\"06\"},{\"label\":\"Jul\",\"value\":\"07\"},{\"label\":\"Aug\",\"value\":\"08\"},{\"label\":\"Sep\",\"value\":\"09\"},{\"label\":\"Oct\",\"value\":\"10\"},{\"label\":\"Nov\",\"value\":\"11\"},{\"label\":\"Dec\",\"value\":\"12\"}]")
+  state playground_days = JSON.parse(ctx.url.searchParams.get("pg_days") ?? "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]")
+  state playground_years = JSON.parse(ctx.url.searchParams.get("pg_years") ?? "[2024,2025,2026,2027,2028,2029,2030]")
   state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
   state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
   state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
@@ -51,17 +51,205 @@ page DatePickerDetail {
           <div class="playground-preview-source" data-playground-preview><DatePicker size='{playground_size}' color='{playground_color}' label='{playground_label}' id='{playground_id}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' locale='{playground_locale}' firstDayOfWeek='{playground_firstDayOfWeek}' months='{playground_months}' days='{playground_days}' years='{playground_years}' min='{playground_min}' max='{playground_max}' step='{playground_step}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' variant='{playground_variant}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;DatePicker
-  value="sample-1"
-  placeholder="Enter a sample value"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page DatePickerExample <span>&#123;</span>
+  state months = [
+  <span>&#123;</span>
+    "label": "Jan",
+    "value": "01"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Feb",
+    "value": "02"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Mar",
+    "value": "03"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Apr",
+    "value": "04"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "May",
+    "value": "05"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jun",
+    "value": "06"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jul",
+    "value": "07"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Aug",
+    "value": "08"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sep",
+    "value": "09"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Oct",
+    "value": "10"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Nov",
+    "value": "11"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Dec",
+    "value": "12"
+  <span>&#125;</span>
+]
+  state days = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31
+]
+  state years = [
+  2024,
+  2025,
+  2026,
+  2027,
+  2028,
+  2029,
+  2030
+]
+  view <span>&#123;</span>
+    &lt;DatePicker
+      value="2026-09-20"
+      placeholder="Enter a sample value"
+      months="<span>&#123;</span>months<span>&#125;</span>"
+      days="<span>&#123;</span>days<span>&#125;</span>"
+      years="<span>&#123;</span>years<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>string</small></span><input id="playground-date-picker-months" name="pg_months" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>string</small></span><input id="playground-date-picker-days" name="pg_days" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>string</small></span><input id="playground-date-picker-years" name="pg_years" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" forLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="2026-09-20" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><select id="playground-date-picker-type" name="pg_type"><option value="date" selected>date</option><option value="datetime-local">datetime-local</option></select></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>{ label: string; value: string }[]</small></span><textarea id="playground-date-picker-months" name="pg_months" rows="5" spellcheck="false" data-playground-json>[
+  &#123;
+    "label": "Jan",
+    "value": "01"
+  &#125;,
+  &#123;
+    "label": "Feb",
+    "value": "02"
+  &#125;,
+  &#123;
+    "label": "Mar",
+    "value": "03"
+  &#125;,
+  &#123;
+    "label": "Apr",
+    "value": "04"
+  &#125;,
+  &#123;
+    "label": "May",
+    "value": "05"
+  &#125;,
+  &#123;
+    "label": "Jun",
+    "value": "06"
+  &#125;,
+  &#123;
+    "label": "Jul",
+    "value": "07"
+  &#125;,
+  &#123;
+    "label": "Aug",
+    "value": "08"
+  &#125;,
+  &#123;
+    "label": "Sep",
+    "value": "09"
+  &#125;,
+  &#123;
+    "label": "Oct",
+    "value": "10"
+  &#125;,
+  &#123;
+    "label": "Nov",
+    "value": "11"
+  &#125;,
+  &#123;
+    "label": "Dec",
+    "value": "12"
+  &#125;
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>number[]</small></span><textarea id="playground-date-picker-days" name="pg_days" rows="5" spellcheck="false" data-playground-json>[
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>number[]</small></span><textarea id="playground-date-picker-years" name="pg_years" rows="5" spellcheck="false" data-playground-json>[
+  2024,
+  2025,
+  2026,
+  2027,
+  2028,
+  2029,
+  2030
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-date-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-date-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-date-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-date-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-date-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -70,67 +258,369 @@ page DatePickerDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Date picker</h2><p>An anchored calendar that does not move surrounding content.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Date picker usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DatePicker
-  value="sample-1"
-  placeholder="Enter a sample value"
-/&gt;</code></pre>
+            <pre><code>page DatePickerExample <span>&#123;</span>
+  state months = [
+  <span>&#123;</span>
+    "label": "Jan",
+    "value": "01"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Feb",
+    "value": "02"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Mar",
+    "value": "03"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Apr",
+    "value": "04"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "May",
+    "value": "05"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jun",
+    "value": "06"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jul",
+    "value": "07"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Aug",
+    "value": "08"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sep",
+    "value": "09"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Oct",
+    "value": "10"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Nov",
+    "value": "11"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Dec",
+    "value": "12"
+  <span>&#125;</span>
+]
+  state days = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31
+]
+  state years = [
+  2024,
+  2025,
+  2026,
+  2027,
+  2028,
+  2029,
+  2030
+]
+  view <span>&#123;</span>
+    &lt;DatePicker
+      label="Start date"
+      name="start-date"
+      value="2026-09-20"
+      placeholder="Enter a sample value"
+      months="<span>&#123;</span>months<span>&#125;</span>"
+      days="<span>&#123;</span>days<span>&#125;</span>"
+      years="<span>&#123;</span>years<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Date and time</h2><p>Choose a calendar date and a time in one field.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DatePicker size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" firstDayOfWeek="0" variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><DatePicker size="sm" label="Schedule for" name="schedule" value="2026-09-20T09:30" placeholder="Enter a sample value" type="datetime-local" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Date and time usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DatePicker
-  size="sm"
-  label="Compact example"
-  value="sample-2"
-  placeholder="Enter a sample value"
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page DatePickerExample <span>&#123;</span>
+  state months = [
+  <span>&#123;</span>
+    "label": "Jan",
+    "value": "01"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Feb",
+    "value": "02"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Mar",
+    "value": "03"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Apr",
+    "value": "04"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "May",
+    "value": "05"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jun",
+    "value": "06"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jul",
+    "value": "07"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Aug",
+    "value": "08"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sep",
+    "value": "09"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Oct",
+    "value": "10"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Nov",
+    "value": "11"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Dec",
+    "value": "12"
+  <span>&#125;</span>
+]
+  state days = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31
+]
+  state years = [
+  2024,
+  2025,
+  2026,
+  2027,
+  2028,
+  2029,
+  2030
+]
+  view <span>&#123;</span>
+    &lt;DatePicker
+      size="sm"
+      label="Schedule for"
+      name="schedule"
+      value="2026-09-20T09:30"
+      placeholder="Enter a sample value"
+      type="datetime-local"
+      months="<span>&#123;</span>months<span>&#125;</span>"
+      days="<span>&#123;</span>days<span>&#125;</span>"
+      years="<span>&#123;</span>years<span>&#125;</span>"
+      variant="secondary"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Disabled date</h2><p>A read-only scheduled date.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DatePicker size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" variant="success" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><DatePicker size="lg" label="Scheduled date" value="2026-09-22" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="success" inline="false" readonly="true" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Disabled date usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DatePicker
-  size="lg"
-  label="Advanced example"
-  value="sample-3"
-  placeholder="Search by name, email, or identifier"
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page DatePickerExample <span>&#123;</span>
+  state months = [
+  <span>&#123;</span>
+    "label": "Jan",
+    "value": "01"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Feb",
+    "value": "02"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Mar",
+    "value": "03"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Apr",
+    "value": "04"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "May",
+    "value": "05"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jun",
+    "value": "06"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Jul",
+    "value": "07"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Aug",
+    "value": "08"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Sep",
+    "value": "09"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Oct",
+    "value": "10"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Nov",
+    "value": "11"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Dec",
+    "value": "12"
+  <span>&#125;</span>
+]
+  state days = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31
+]
+  state years = [
+  2024,
+  2025,
+  2026,
+  2027,
+  2028,
+  2029,
+  2030
+]
+  view <span>&#123;</span>
+    &lt;DatePicker
+      size="lg"
+      label="Scheduled date"
+      value="2026-09-22"
+      placeholder="Search by name, email, or identifier"
+      months="<span>&#123;</span>months<span>&#125;</span>"
+      days="<span>&#123;</span>days<span>&#125;</span>"
+      years="<span>&#123;</span>years<span>&#125;</span>"
+      variant="success"
+      readonly="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -173,10 +663,10 @@ if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#
 if (component) registerOutputHandler(component, "invalid", (payload) =&gt; <span>&#123;</span>
   console.log("invalid", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>string</td><td><code>[<span>&#123;</span> label: "Jan", value: "01" <span>&#125;</span>, <span>&#123;</span> label: "Feb", value: "02" <span>&#125;</span>, <span>&#123;</span> label: "Mar", value: "03" <span>&#125;</span>, <span>&#123;</span> label: "Apr", value: "04" <span>&#125;</span>, <span>&#123;</span> label: "May", value: "05" <span>&#125;</span>, <span>&#123;</span> label: "Jun", value: "06" <span>&#125;</span>, <span>&#123;</span> label: "Jul", value: "07" <span>&#125;</span>, <span>&#123;</span> label: "Aug", value: "08" <span>&#125;</span>, <span>&#123;</span> label: "Sep", value: "09" <span>&#125;</span>, <span>&#123;</span> label: "Oct", value: "10" <span>&#125;</span>, <span>&#123;</span> label: "Nov", value: "11" <span>&#125;</span>, <span>&#123;</span> label: "Dec", value: "12" <span>&#125;</span>]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>string</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>string</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>{ label: string; value: string }[]</td><td><code>[<span>&#123;</span> label: "Jan", value: "01" <span>&#125;</span>, <span>&#123;</span> label: "Feb", value: "02" <span>&#125;</span>, <span>&#123;</span> label: "Mar", value: "03" <span>&#125;</span>, <span>&#123;</span> label: "Apr", value: "04" <span>&#125;</span>, <span>&#123;</span> label: "May", value: "05" <span>&#125;</span>, <span>&#123;</span> label: "Jun", value: "06" <span>&#125;</span>, <span>&#123;</span> label: "Jul", value: "07" <span>&#125;</span>, <span>&#123;</span> label: "Aug", value: "08" <span>&#125;</span>, <span>&#123;</span> label: "Sep", value: "09" <span>&#125;</span>, <span>&#123;</span> label: "Oct", value: "10" <span>&#125;</span>, <span>&#123;</span> label: "Nov", value: "11" <span>&#125;</span>, <span>&#123;</span> label: "Dec", value: "12" <span>&#125;</span>]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>number[]</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>number[]</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Production default</a><a href="#date-picker-demo-2">Compact application</a><a href="#date-picker-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Date picker</a><a href="#date-picker-demo-2">Date and time</a><a href="#date-picker-demo-3">Disabled date</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

examples/component-showcase/app/pages/components/device-frame.wrn

@@ -40,119 +40,124 @@ page DeviceFrameDetail {
           <div class="playground-preview-source" data-playground-preview><DeviceFrame size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' device='{playground_device}' orientation='{playground_orientation}' src='{playground_src}' srcdoc='{playground_srcdoc}' frameTitle='{playground_frameTitle}' showToolbar='{playground_showToolbar}' allow='{playground_allow}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;DeviceFrame
-  title="Device Frame example"
-  description="A polished default device frame for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "device-frame-0-1",
-      "key": "device-frame-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "device-frame-0-2",
-      "key": "device-frame-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  frameTitle="Device Frame example"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page DeviceFrameExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "device-frame-0-1",
+    "key": "device-frame-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "device-frame-0-2",
+    "key": "device-frame-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DeviceFrame
+      title="Device Frame example"
+      description="A polished default device frame for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      frameTitle="Device Frame example"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -286,119 +291,124 @@ page DeviceFrameDetail {
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DeviceFrame
-  title="Device Frame example"
-  description="A polished default device frame for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "device-frame-0-1",
-      "key": "device-frame-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "device-frame-0-2",
-      "key": "device-frame-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  frameTitle="Device Frame example"
-/&gt;</code></pre>
+            <pre><code>page DeviceFrameExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "device-frame-0-1",
+    "key": "device-frame-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "device-frame-0-2",
+    "key": "device-frame-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DeviceFrame
+      title="Device Frame example"
+      description="A polished default device frame for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      frameTitle="Device Frame example"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -415,121 +425,126 @@ page DeviceFrameDetail {
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DeviceFrame
-  size="sm"
-  title="Compact Device Frame"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "device-frame-1-1",
-      "key": "device-frame-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "device-frame-1-2",
-      "key": "device-frame-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="secondary"
-  frameTitle="Compact Device Frame"
-/&gt;</code></pre>
+            <pre><code>page DeviceFrameExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "device-frame-1-1",
+    "key": "device-frame-1-1",
+    "value": "primary",
+    "label": "Secondary workflow",
+    "title": "Secondary workflow",
+    "description": "A compact configuration designed for dense application layouts.",
+    "text": "A configurable sample message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--zap]",
+    "iconClass": "icon-[lucide--zap]",
+    "variant": "secondary",
+    "status": "Active",
+    "time": "10:15",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 24,
+    "percentage": 48,
+    "color": "#0284c7",
+    "target": "_self",
+    "ariaLabel": "Open secondary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "device-frame-1-2",
+    "key": "device-frame-1-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A compact configuration designed for dense application layouts.",
+    "text": "Another configurable message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--zap]",
+    "iconClass": "icon-[lucide--zap]",
+    "variant": "secondary",
+    "status": "Active",
+    "time": "10:15",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 48,
+    "percentage": 48,
+    "color": "#0284c7",
+    "target": "_self",
+    "ariaLabel": "Open secondary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DeviceFrame
+      size="sm"
+      title="Compact Device Frame"
+      description="A compact configuration for dashboards and dense product surfaces."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="secondary"
+      frameTitle="Compact Device Frame"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -546,121 +561,126 @@ page DeviceFrameDetail {
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DeviceFrame
-  size="lg"
-  title="Advanced Device Frame"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "device-frame-2-1",
-      "key": "device-frame-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "device-frame-2-2",
-      "key": "device-frame-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#device-frame-demo",
-      "actionHref": "#device-frame-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="success"
-  frameTitle="Advanced Device Frame"
-/&gt;</code></pre>
+            <pre><code>page DeviceFrameExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "device-frame-2-1",
+    "key": "device-frame-2-1",
+    "value": "primary",
+    "label": "Advanced workflow",
+    "title": "Advanced workflow",
+    "description": "A richer configuration with more supporting information and actions.",
+    "text": "A configurable sample message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "Explore workflow",
+    "icon": "icon-[lucide--circle-check]",
+    "iconClass": "icon-[lucide--circle-check]",
+    "variant": "success",
+    "status": "Complete",
+    "time": "11:45",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 32,
+    "percentage": 91,
+    "color": "#059669",
+    "target": "_self",
+    "ariaLabel": "Open advanced workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Unlimited"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "device-frame-2-2",
+    "key": "device-frame-2-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A richer configuration with more supporting information and actions.",
+    "text": "Another configurable message.",
+    "href": "#device-frame-demo",
+    "actionHref": "#device-frame-demo",
+    "actionLabel": "Explore workflow",
+    "icon": "icon-[lucide--circle-check]",
+    "iconClass": "icon-[lucide--circle-check]",
+    "variant": "success",
+    "status": "Complete",
+    "time": "11:45",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": true,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 64,
+    "percentage": 91,
+    "color": "#059669",
+    "target": "_self",
+    "ariaLabel": "Open advanced workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Unlimited"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DeviceFrame
+      size="lg"
+      title="Advanced Device Frame"
+      description="A richer configuration demonstrating additional content and hierarchy."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="success"
+      frameTitle="Advanced Device Frame"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -119,7 +119,7 @@ page DividerDetail {
     </div>
     <nav class="detail-pagination">
       <a href="/components/custom-scrollbar"><small>Previous</small><strong>← Custom Scrollbar</strong></a>
-      <a href="/components/feature-grid"><small>Next</small><strong>Feature Grid →</strong></a>
+      <a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
     </nav>
   }
 }

examples/component-showcase/app/pages/components/drag-and-drop.wrn

@@ -3,11 +3,11 @@ page DragAndDropDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drag And Drop example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drag and drop for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"drag-and-drop-0-1\",\"key\":\"drag-and-drop-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#drag-and-drop-demo\",\"actionHref\":\"#drag-and-drop-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"drag-and-drop-0-2\",\"key\":\"drag-and-drop-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#drag-and-drop-demo\",\"actionHref\":\"#drag-and-drop-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Project priorities"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "Drag to reorder, or use the arrow buttons."
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Review designs\"},{\"label\":\"Build the dashboard\"},{\"label\":\"Test accessibility\"},{\"label\":\"Prepare release notes\"}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Drag And Drop"
     description = "Theme-aware, responsive drag and drop component."
@@ -33,232 +33,49 @@ page DragAndDropDetail {
           <div class="playground-preview-source" data-playground-preview><DragAndDrop size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;DragAndDrop
-  title="Drag And Drop example"
-  description="A polished default drag and drop for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "drag-and-drop-0-1",
-      "key": "drag-and-drop-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "drag-and-drop-0-2",
-      "key": "drag-and-drop-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page DragAndDropExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Review designs"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Build the dashboard"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Test accessibility"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Prepare release notes"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DragAndDrop
+      title="Project priorities"
+      description="Drag to reorder, or use the arrow buttons."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Drag And Drop example" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="A polished default drag and drop for a modern application." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Project priorities" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="Drag to reorder, or use the arrow buttons." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "drag-and-drop-0-1",
-    "key": "drag-and-drop-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#drag-and-drop-demo",
-    "actionHref": "#drag-and-drop-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Review designs"
   &#125;,
   &#123;
-    "id": "drag-and-drop-0-2",
-    "key": "drag-and-drop-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#drag-and-drop-demo",
-    "actionHref": "#drag-and-drop-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Build the dashboard"
+  &#125;,
+  &#123;
+    "label": "Test accessibility"
+  &#125;,
+  &#123;
+    "label": "Prepare release notes"
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -274,122 +91,33 @@ page DragAndDropDetail {
           <div id="drag-and-drop-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DragAndDrop size="default" title="Drag And Drop example" description="A polished default drag and drop for a modern application." items='[{"id":"drag-and-drop-0-1","key":"drag-and-drop-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"drag-and-drop-0-2","key":"drag-and-drop-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DragAndDrop
-  title="Drag And Drop example"
-  description="A polished default drag and drop for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "drag-and-drop-0-1",
-      "key": "drag-and-drop-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "drag-and-drop-0-2",
-      "key": "drag-and-drop-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page DragAndDropExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Review designs"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Build the dashboard"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Test accessibility"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Prepare release notes"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DragAndDrop
+      title="Project priorities"
+      description="Drag to reorder, or use the arrow buttons."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -402,124 +130,33 @@ page DragAndDropDetail {
           <div id="drag-and-drop-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DragAndDrop size="sm" title="Compact Drag And Drop" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"drag-and-drop-1-1","key":"drag-and-drop-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"drag-and-drop-1-2","key":"drag-and-drop-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DragAndDrop
-  size="sm"
-  title="Compact Drag And Drop"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "drag-and-drop-1-1",
-      "key": "drag-and-drop-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "drag-and-drop-1-2",
-      "key": "drag-and-drop-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page DragAndDropExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Review designs"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Build the dashboard"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Test accessibility"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Prepare release notes"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DragAndDrop
+      title="Project priorities"
+      description="Drag to reorder, or use the arrow buttons."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -532,124 +169,33 @@ page DragAndDropDetail {
           <div id="drag-and-drop-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><DragAndDrop size="lg" title="Advanced Drag And Drop" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"drag-and-drop-2-1","key":"drag-and-drop-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"drag-and-drop-2-2","key":"drag-and-drop-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;DragAndDrop
-  size="lg"
-  title="Advanced Drag And Drop"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "drag-and-drop-2-1",
-      "key": "drag-and-drop-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "drag-and-drop-2-2",
-      "key": "drag-and-drop-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#drag-and-drop-demo",
-      "actionHref": "#drag-and-drop-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page DragAndDropExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Review designs"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Build the dashboard"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Test accessibility"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Prepare release notes"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;DragAndDrop
+      title="Project priorities"
+      description="Drag to reorder, or use the arrow buttons."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -1,14 +1,17 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page DropdownDetail {
   layout = "showcase"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]")
   state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
   state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Open playground menu"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Dropdown 1 example"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_showChevron = (ctx.url.searchParams.get("pg_showChevron") ?? "true") === "true"
   state playground_menuLabel = ctx.url.searchParams.get("pg_menuLabel") ?? "Dropdown"
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start"
+  state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "sheet"
   state playground_width = ctx.url.searchParams.get("pg_width") ?? "md"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
@@ -31,7 +34,7 @@ page DropdownDetail {
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Dropdown</h1>
         <p>Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.</p>
-        <div class="detail-badges"><span>17 props</span><span>4 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>20 props</span><span>4 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -40,138 +43,145 @@ page DropdownDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Dropdown items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' label='{playground_label}' icon='{playground_icon}' showChevron='{playground_showChevron}' menuLabel='{playground_menuLabel}' placement='{playground_placement}' width='{playground_width}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' emptyLabel='{playground_emptyLabel}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Dropdown value='{playground_value}' items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' label='{playground_label}' ariaLabel='{playground_ariaLabel}' icon='{playground_icon}' showChevron='{playground_showChevron}' menuLabel='{playground_menuLabel}' placement='{playground_placement}' mobilePanel='{playground_mobilePanel}' width='{playground_width}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' emptyLabel='{playground_emptyLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Dropdown
-  items='[
-    <span>&#123;</span>
-      "id": "dropdown-0-1",
-      "key": "dropdown-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "dropdown-0-2",
-      "key": "dropdown-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  label="Dropdown"
-  menuLabel="Dropdown"
-  emptyLabel="Dropdown"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Dropdown&gt;</code></pre>
+            <pre><code data-playground-code>page DropdownExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "dropdown-0-1",
+    "key": "dropdown-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#dropdown-demo",
+    "actionHref": "#dropdown-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "dropdown-0-2",
+    "key": "dropdown-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#dropdown-demo",
+    "actionHref": "#dropdown-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Dropdown
+      value="sample-1"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="Dropdown"
+      ariaLabel="Dropdown 1 example"
+      menuLabel="Dropdown"
+      emptyLabel="Dropdown"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Dropdown&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>20 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-dropdown-value"><span><strong>value</strong><small>string | number</small></span><input id="playground-dropdown-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
     "label": "Open dashboard",
     "description": "View the operational workspace",
@@ -193,7 +203,7 @@ page DropdownDetail {
     "icon": "icon-[lucide--trash-2]",
     "danger": true
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-dropdown-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Open playground menu" /></label><label class="playground-field" for="playground-dropdown-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-dropdown-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-dropdown-showChevron"><span><strong>show Chevron</strong><small>boolean</small></span><input id="playground-dropdown-showChevron" name="pg_showChevron" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-menuLabel"><span><strong>menu Label</strong><small>string</small></span><input id="playground-dropdown-menuLabel" name="pg_menuLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-dropdown-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-dropdown-width"><span><strong>width</strong><small>string</small></span><select id="playground-dropdown-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option></select></label><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-dropdown-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-dropdown-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-dropdown-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-dropdown-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-dropdown-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-dropdown-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Open playground menu" /></label><label class="playground-field" for="playground-dropdown-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-dropdown-ariaLabel" name="pg_ariaLabel" type="text" value="Dropdown 1 example" /></label><label class="playground-field" for="playground-dropdown-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-dropdown-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-dropdown-showChevron"><span><strong>show Chevron</strong><small>boolean</small></span><input id="playground-dropdown-showChevron" name="pg_showChevron" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-menuLabel"><span><strong>menu Label</strong><small>string</small></span><input id="playground-dropdown-menuLabel" name="pg_menuLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-dropdown-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-dropdown-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-dropdown-mobilePanel" name="pg_mobilePanel" type="text" value="sheet" /></label><label class="playground-field" for="playground-dropdown-width"><span><strong>width</strong><small>string</small></span><select id="playground-dropdown-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option></select></label><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-dropdown-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-dropdown-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-dropdown-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small><Line truncated
         </form>
       </div>
     </section>
@@ -209,49 +219,56 @@ page DropdownDetail {
           <div id="dropdown-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
-            <div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Open actions" icon="icon-[lucide--menu]" showChevron="true" menuLabel="Dropdown" placement="bottom-start" width="lg" size="default" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Dropdown" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Dropdown value="sample-1" items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Open actions" ariaLabel="Dropdown 1 example" icon="icon-[lucide--menu]" showChevron="true" menuLabel="Dropdown" placement="bottom-start" width="lg" size="default" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Dropdown" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Action dropdown usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Dropdown
-  items='[
-    <span>&#123;</span>
-      "label": "Open dashboard",
-      "description": "View the operational workspace",
-      "value": "dashboard",
-      "icon": "icon-[lucide--layout-dashboard]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Share record",
-      "value": "share",
-      "icon": "icon-[lucide--share-2]",
-      "shortcut": "Ctrl S"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "divider"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Delete record",
-      "value": "delete",
-      "icon": "icon-[lucide--trash-2]",
-      "danger": true
-    <span>&#125;</span>
-  ]'
-  label="Open actions"
-  icon="icon-[lucide--menu]"
-  menuLabel="Dropdown"
-  width="lg"
-  emptyLabel="Dropdown"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Dropdown&gt;</code></pre>
+            <pre><code>page DropdownExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "type": "divider"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Dropdown
+      value="sample-1"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="Open actions"
+      ariaLabel="Dropdown 1 example"
+      icon="icon-[lucide--menu]"
+      menuLabel="Dropdown"
+      width="lg"
+      emptyLabel="Dropdown"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Dropdown&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -264,52 +281,59 @@ page DropdownDetail {
           <div id="dropdown-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
-            <div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="More actions" icon="icon-[lucide--ellipsis]" showChevron="false" menuLabel="Compact example" width="sm" size="sm" variant="soft" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Dropdown value="sample-2" items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="More actions" ariaLabel="Dropdown 2 example" icon="icon-[lucide--ellipsis]" showChevron="false" menuLabel="Compact example" width="sm" size="sm" variant="soft" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact overflow menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Dropdown
-  items='[
-    <span>&#123;</span>
-      "label": "Open dashboard",
-      "description": "View the operational workspace",
-      "value": "dashboard",
-      "icon": "icon-[lucide--layout-dashboard]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Share record",
-      "value": "share",
-      "icon": "icon-[lucide--share-2]",
-      "shortcut": "Ctrl S"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "divider"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Delete record",
-      "value": "delete",
-      "icon": "icon-[lucide--trash-2]",
-      "danger": true
-    <span>&#125;</span>
-  ]'
-  label="More actions"
-  icon="icon-[lucide--ellipsis]"
-  showChevron="false"
-  menuLabel="Compact example"
-  width="sm"
-  size="sm"
-  variant="soft"
-  emptyLabel="Compact example"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Dropdown&gt;</code></pre>
+            <pre><code>page DropdownExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "type": "divider"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Dropdown
+      value="sample-2"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="More actions"
+      ariaLabel="Dropdown 2 example"
+      icon="icon-[lucide--ellipsis]"
+      showChevron="false"
+      menuLabel="Compact example"
+      width="sm"
+      size="sm"
+      variant="soft"
+      emptyLabel="Compact example"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Dropdown&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -322,51 +346,58 @@ page DropdownDetail {
           <div id="dropdown-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
-            <div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Review detailed menu" icon="icon-[lucide--trash-2]" showChevron="true" menuLabel="Advanced example" placement="bottom-end" width="xl" size="lg" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Dropdown value="sample-3" items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Review detailed menu" ariaLabel="Dropdown 3 example" icon="icon-[lucide--trash-2]" showChevron="true" menuLabel="Advanced example" placement="bottom-end" width="xl" size="lg" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Detailed action menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Dropdown
-  items='[
-    <span>&#123;</span>
-      "label": "Open dashboard",
-      "description": "View the operational workspace",
-      "value": "dashboard",
-      "icon": "icon-[lucide--layout-dashboard]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Share record",
-      "value": "share",
-      "icon": "icon-[lucide--share-2]",
-      "shortcut": "Ctrl S"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "divider"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Delete record",
-      "value": "delete",
-      "icon": "icon-[lucide--trash-2]",
-      "danger": true
-    <span>&#125;</span>
-  ]'
-  label="Review detailed menu"
-  icon="icon-[lucide--trash-2]"
-  menuLabel="Advanced example"
-  placement="bottom-end"
-  width="xl"
-  size="lg"
-  emptyLabel="Advanced example"&gt;
-  &lt;div data-slot="trigger"&gt;
-    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="header"&gt;
-    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Dropdown&gt;</code></pre>
+            <pre><code>page DropdownExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "type": "divider"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Dropdown
+      value="sample-3"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="Review detailed menu"
+      ariaLabel="Dropdown 3 example"
+      icon="icon-[lucide--trash-2]"
+      menuLabel="Advanced example"
+      placement="bottom-end"
+      width="xl"
+      size="lg"
+      emptyLabel="Advanced example"&gt;
+      &lt;div data-slot="trigger"&gt;
+        &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="header"&gt;
+        &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="footer"&gt;
+        &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Dropdown&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -399,7 +430,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
 if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
   console.log("action", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Open menu"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showChevron</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>menuLabel</code></td><td>string</td><td><code>"Dropdown menu"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom-start"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No menu items"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>value</code></td><td>string | number</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Open menu"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showChevron</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>menuLabel</code></td><td>string</td><td><code>"Dropdown menu"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom-start"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"sheet"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No menu items"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#dropdown-demo-1">Action dropdown</a><a href="#dropdown-demo-2">Compact overflow menu</a><a href="#dropdown-demo-3">Detailed action menu</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/feature-card.wrn

@@ -1,211 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page FeatureCardDetail {
-  layout = "showcase"
-  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_iconStyle = ctx.url.searchParams.get("pg_iconStyle") ?? "soft"
-  state playground_iconSize = ctx.url.searchParams.get("pg_iconSize") ?? "default"
-  state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Feature Card example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default feature card for a modern application."
-  state playground_image = ctx.url.searchParams.get("pg_image") ?? ""
-  state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? ""
-  state playground_imagePosition = ctx.url.searchParams.get("pg_imagePosition") ?? "top"
-  state playground_imageAspect = ctx.url.searchParams.get("pg_imageAspect") ?? "wide"
-  state playground_imageLoading = ctx.url.searchParams.get("pg_imageLoading") ?? "lazy"
-  state playground_href = ctx.url.searchParams.get("pg_href") ?? "#feature-card-demo"
-  state playground_target = ctx.url.searchParams.get("pg_target") ?? ""
-  state playground_rel = ctx.url.searchParams.get("pg_rel") ?? ""
-  state playground_external = (ctx.url.searchParams.get("pg_external") ?? "false") === "true"
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Feature Card"
-  state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
-  state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
-  state playground_stretchedLink = (ctx.url.searchParams.get("pg_stretchedLink") ?? "true") === "true"
-  state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
-  state playground_badgeColor = ctx.url.searchParams.get("pg_badgeColor") ?? "primary"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Feature Card"
-    description = "Present one linked feature or service with media, icon, badge, description, and action."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Feature Card</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>Feature Card</h1>
-        <p>Present one linked feature or service with media, icon, badge, description, and action.</p>
-        <div class="detail-badges"><span>28 props</span><span>4 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureCard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Card</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><FeatureCard icon='{playground_icon}' iconStyle='{playground_iconStyle}' iconSize='{playground_iconSize}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' image='{playground_image}' imageAlt='{playground_imageAlt}' imagePosition='{playground_imagePosition}' imageAspect='{playground_imageAspect}' imageLoading='{playground_imageLoading}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' actionLabel='{playground_actionLabel}' actionIcon='{playground_actionIcon}' showArrow='{playground_showArrow}' stretchedLink='{playground_stretchedLink}' badge='{playground_badge}' badgeColor='{playground_badgeColor}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' hover='{playground_hover}' align='{playground_align}' disabled='{playground_disabled}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;FeatureCard
-  title="Feature Card example"
-  description="A polished default feature card for a modern application."
-  href="#feature-card-demo"
-  actionLabel="Feature Card"
-  align="start"&gt;
-  &lt;div data-slot="media"&gt;
-    &lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureCard&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-feature-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-feature-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-feature-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-card-iconSize" name="pg_iconSize"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-card-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-feature-card-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-card-title" name="pg_title" type="text" value="Feature Card example" /></label><label class="playground-field" for="playground-feature-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-card-description" name="pg_description" type="text" value="A polished default feature card for a modern application." /></label><label class="playground-field" for="playground-feature-card-image"><span><strong>image</strong><small>string</small></span><input id="playground-feature-card-image" name="pg_image" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-feature-card-imageAlt" name="pg_imageAlt" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-feature-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-card-imageAspect"><span><strong>image Aspect</strong><small>string</small></span><select id="playground-feature-card-imageAspect" name="pg_imageAspect"><option value="wide" selected>wide</option><option value="square">square</option><option value="video">video</option><option value="portrait">portrait</option></select></label><label class="playground-field" for="playground-feature-card-imageLoading"><span><strong>image Loading</strong><small>string</small></span><input id="playground-feature-card-imageLoading" name="pg_imageLoading" type="text" value="lazy" /></label><label class="playground-field" for="playground-feature-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-card-href" name="pg_href" type="text" value="#feature-card-demo" /></label><label class="playground-field" for="playground-feature-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-feature-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-feature-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-feature-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-feature-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Card" /></label><label class="playground-field" for="playground-feature-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-feature-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-card-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-feature-card-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></Line truncated
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Linked service card</h2><p>Present one service with an icon, hierarchy, badge, and clear action.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-card-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Linked service card usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureCard
-  icon="icon-[lucide--shield-check]"
-  eyebrow="Citizen support"
-  title="Citizen services"
-  description="Report incidents, request certificates, and find safety information."
-  href="#citizen-services"
-  actionLabel="Explore services"
-  badge="Public"
-  align="start"&gt;
-  &lt;div data-slot="media"&gt;
-    &lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureCard&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Image-led feature card</h2><p>Use a visual preview for products, campaigns, dashboards, or service explanations.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-card-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureCard icon="icon-[lucide--arrow-right]" title="Unified citizen portal" description="Access trusted services from one responsive interface." image="/showcase-images/dashboard-preview.svg" imageAlt="Abstract dashboard preview" imagePosition="top" imageAspect="wide" href="#portal" external="false" actionLabel="Open portal" showArrow="true" stretchedLink="true" badge="Featured" size="sm" color="info" variant="raised" align="center" disabled="false" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Image-led feature card usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureCard
-  icon="icon-[lucide--arrow-right]"
-  title="Unified citizen portal"
-  description="Access trusted services from one responsive interface."
-  image="/showcase-images/dashboard-preview.svg"
-  imageAlt="Abstract dashboard preview"
-  href="#portal"
-  actionLabel="Open portal"
-  badge="Featured"
-  size="sm"
-  color="info"
-  variant="raised"
-  align="center"&gt;
-  &lt;div data-slot="media"&gt;
-    &lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureCard&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Solid callout card</h2><p>Use stronger contrast for a featured capability or high-priority service.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-card-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureCard icon="icon-[lucide--siren]" eyebrow="Emergency" title="Get urgent help" description="Find verified emergency contacts and immediate safety guidance." href="#emergency" external="false" actionLabel="View emergency help" showArrow="true" stretchedLink="true" badge="Important" size="lg" color="danger" variant="solid" hover="glow" align="end" disabled="false" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Solid callout card usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureCard
-  icon="icon-[lucide--siren]"
-  eyebrow="Emergency"
-  title="Get urgent help"
-  description="Find verified emergency contacts and immediate safety guidance."
-  href="#emergency"
-  actionLabel="View emergency help"
-  badge="Important"
-  size="lg"
-  color="danger"
-  variant="solid"
-  hover="glow"
-  align="end"&gt;
-  &lt;div data-slot="media"&gt;
-    &lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureCard&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>iconSize</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Feature"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>image</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imagePosition</code></td><td>string</td><td><code>"top"</code></td><td>No</td></tr><tr><td><code>imageAspect</code></td><td>string</td><td><code>"wide"</code></td><td>No</td></tr><tr><td><code>imageLoading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>"Learn more"</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>stretchedLink</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeColor</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-card-demo-1">Linked service card</a><a href="#feature-card-demo-2">Image-led feature card</a><a href="#feature-card-demo-3">Solid callout card</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/ctasection"><small>Previous</small><strong>← CTASection</strong></a>
-      <a href="/components/feature-icon-card"><small>Next</small><strong>Feature Icon Card →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/feature-grid.wrn

@@ -1,408 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page FeatureGridDetail {
-  layout = "showcase"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"icon\":\"icon-[lucide--shield-check]\",\"eyebrow\":\"Citizen support\",\"title\":\"Citizen services\",\"description\":\"Report incidents, request certificates, and find safety information.\",\"href\":\"#citizen-services\",\"actionLabel\":\"Explore services\",\"badge\":\"Public\",\"color\":\"primary\",\"variant\":\"default\",\"hover\":\"lift\"},{\"icon\":\"icon-[lucide--map-pin]\",\"eyebrow\":\"Directory\",\"title\":\"Station directory\",\"description\":\"Locate offices, jurisdictions, contacts, and public service hours.\",\"href\":\"#station-directory\",\"actionLabel\":\"Find a station\",\"badge\":\"Directory\",\"color\":\"info\",\"variant\":\"soft\",\"hover\":\"border\"},{\"icon\":\"icon-[lucide--radio-tower]\",\"eyebrow\":\"Verified\",\"title\":\"Public updates\",\"description\":\"Publish official alerts, notices, advisories, and verified information.\",\"href\":\"#public-updates\",\"actionLabel\":\"View updates\",\"badge\":\"Live\",\"color\":\"success\",\"variant\":\"gradient\",\"hover\":\"glow\"}]")
-  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
-  state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
-  state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
-  state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
-  state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
-  state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Feature Grid"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Feature Grid"
-    description = "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Feature Grid</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
-        <h1>Feature Grid</h1>
-        <p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p>
-        <div class="detail-badges"><span>14 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureGrid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><FeatureGrid size='{playground_size}' color='{playground_color}' items='{playground_items}' columns='{playground_columns}' tabletColumns='{playground_tabletColumns}' mobileColumns='{playground_mobileColumns}' gap='{playground_gap}' minItemWidth='{playground_minItemWidth}' equalHeight='{playground_equalHeight}' align='{playground_align}' maxWidth='{playground_maxWidth}' variant='{playground_variant}' label='{playground_label}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;FeatureGrid
-  items='[
-    <span>&#123;</span>
-      "id": "feature-grid-0-1",
-      "key": "feature-grid-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#feature-grid-demo",
-      "actionHref": "#feature-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "feature-grid-0-2",
-      "key": "feature-grid-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#feature-grid-demo",
-      "actionHref": "#feature-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  align="start"
-  label="Feature Grid"
-/&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-feature-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-feature-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "icon": "icon-[lucide--shield-check]",
-    "eyebrow": "Citizen support",
-    "title": "Citizen services",
-    "description": "Report incidents, request certificates, and find safety information.",
-    "href": "#citizen-services",
-    "actionLabel": "Explore services",
-    "badge": "Public",
-    "color": "primary",
-    "variant": "default",
-    "hover": "lift"
-  &#125;,
-  &#123;
-    "icon": "icon-[lucide--map-pin]",
-    "eyebrow": "Directory",
-    "title": "Station directory",
-    "description": "Locate offices, jurisdictions, contacts, and public service hours.",
-    "href": "#station-directory",
-    "actionLabel": "Find a station",
-    "badge": "Directory",
-    "color": "info",
-    "variant": "soft",
-    "hover": "border"
-  &#125;,
-  &#123;
-    "icon": "icon-[lucide--radio-tower]",
-    "eyebrow": "Verified",
-    "title": "Public updates",
-    "description": "Publish official alerts, notices, advisories, and verified information.",
-    "href": "#public-updates",
-    "actionLabel": "View updates",
-    "badge": "Live",
-    "color": "success",
-    "variant": "gradient",
-    "hover": "glow"
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-feature-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-feature-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-feature-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-feature-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-feature-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-feature-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-feature-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-feature-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-feature-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-feature-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-grid-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-grid-align" name="pg_align"><option value="start" selected>start</option><option value="stretch">stretch</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-feature-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-grid-label"><span><strong>label</strong><small>string</small></span><input id="playground-feature-grid-label" name="pg_label" type="text" value="Feature Grid" /></label><label class="playground-field" for="playground-feature-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Three-column service grid</h2><p>Arrange services or capabilities as equal-height responsive cards.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-grid-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureGrid size="default" items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Three-column service grid usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureGrid
-  items='[
-    <span>&#123;</span>
-      "icon": "icon-[lucide--shield-check]",
-      "eyebrow": "Citizen support",
-      "title": "Citizen services",
-      "description": "Report incidents, request certificates, and find safety information.",
-      "href": "#citizen-services",
-      "actionLabel": "Explore services",
-      "badge": "Public",
-      "color": "primary",
-      "variant": "default",
-      "hover": "lift"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--map-pin]",
-      "eyebrow": "Directory",
-      "title": "Station directory",
-      "description": "Locate offices, jurisdictions, contacts, and public service hours.",
-      "href": "#station-directory",
-      "actionLabel": "Find a station",
-      "badge": "Directory",
-      "color": "info",
-      "variant": "soft",
-      "hover": "border"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--radio-tower]",
-      "eyebrow": "Verified",
-      "title": "Public updates",
-      "description": "Publish official alerts, notices, advisories, and verified information.",
-      "href": "#public-updates",
-      "actionLabel": "View updates",
-      "badge": "Live",
-      "color": "success",
-      "variant": "gradient",
-      "hover": "glow"
-    <span>&#125;</span>
-  ]'
-  gap="lg"
-  align="start"
-  label="Feature Grid"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact four-column grid</h2><p>Use smaller gaps and four columns for short benefit or capability cards.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-grid-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureGrid size="sm" items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"},{"icon":"icon-[lucide--file-check-2]","title":"Certificates","description":"Request and track certificates online.","href":"#certificates","color":"warning"}]' columns="4" tabletColumns="2" mobileColumns="1" gap="sm" equalHeight="true" align="center" variant="soft" label="Compact example" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact four-column grid usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureGrid
-  size="sm"
-  items='[
-    <span>&#123;</span>
-      "icon": "icon-[lucide--shield-check]",
-      "eyebrow": "Citizen support",
-      "title": "Citizen services",
-      "description": "Report incidents, request certificates, and find safety information.",
-      "href": "#citizen-services",
-      "actionLabel": "Explore services",
-      "badge": "Public",
-      "color": "primary",
-      "variant": "default",
-      "hover": "lift"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--map-pin]",
-      "eyebrow": "Directory",
-      "title": "Station directory",
-      "description": "Locate offices, jurisdictions, contacts, and public service hours.",
-      "href": "#station-directory",
-      "actionLabel": "Find a station",
-      "badge": "Directory",
-      "color": "info",
-      "variant": "soft",
-      "hover": "border"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--radio-tower]",
-      "eyebrow": "Verified",
-      "title": "Public updates",
-      "description": "Publish official alerts, notices, advisories, and verified information.",
-      "href": "#public-updates",
-      "actionLabel": "View updates",
-      "badge": "Live",
-      "color": "success",
-      "variant": "gradient",
-      "hover": "glow"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--file-check-2]",
-      "title": "Certificates",
-      "description": "Request and track certificates online.",
-      "href": "#certificates",
-      "color": "warning"
-    <span>&#125;</span>
-  ]'
-  columns="4"
-  gap="sm"
-  align="center"
-  variant="soft"
-  label="Compact example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Auto-fit feature collection</h2><p>Let cards wrap automatically according to a minimum useful width.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-grid-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureGrid size="lg" items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="xl" minItemWidth="18rem" equalHeight="true" align="end" maxWidth="wide" variant="panel" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Auto-fit feature collection usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureGrid
-  size="lg"
-  items='[
-    <span>&#123;</span>
-      "icon": "icon-[lucide--shield-check]",
-      "eyebrow": "Citizen support",
-      "title": "Citizen services",
-      "description": "Report incidents, request certificates, and find safety information.",
-      "href": "#citizen-services",
-      "actionLabel": "Explore services",
-      "badge": "Public",
-      "color": "primary",
-      "variant": "default",
-      "hover": "lift"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--map-pin]",
-      "eyebrow": "Directory",
-      "title": "Station directory",
-      "description": "Locate offices, jurisdictions, contacts, and public service hours.",
-      "href": "#station-directory",
-      "actionLabel": "Find a station",
-      "badge": "Directory",
-      "color": "info",
-      "variant": "soft",
-      "hover": "border"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "icon": "icon-[lucide--radio-tower]",
-      "eyebrow": "Verified",
-      "title": "Public updates",
-      "description": "Publish official alerts, notices, advisories, and verified information.",
-      "href": "#public-updates",
-      "actionLabel": "View updates",
-      "badge": "Live",
-      "color": "success",
-      "variant": "gradient",
-      "hover": "glow"
-    <span>&#125;</span>
-  ]'
-  gap="xl"
-  minItemWidth="18rem"
-  align="end"
-  maxWidth="wide"
-  variant="panel"
-  label="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"stretch"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Features"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-grid-demo-1">Three-column service grid</a><a href="#feature-grid-demo-2">Compact four-column grid</a><a href="#feature-grid-demo-3">Auto-fit feature collection</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/divider"><small>Previous</small><strong>← Divider</strong></a>
-      <a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/feature-icon-card.wrn

@@ -1,167 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page FeatureIconCardDetail {
-  layout = "showcase"
-  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_iconSize = ctx.url.searchParams.get("pg_iconSize") ?? "md"
-  state playground_iconVariant = ctx.url.searchParams.get("pg_iconVariant") ?? "soft"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Feature Icon Card example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default feature icon card for a modern application."
-  state playground_href = ctx.url.searchParams.get("pg_href") ?? "#feature-icon-card-demo"
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Feature Icon Card"
-  state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Feature Icon Card"
-    description = "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Feature Icon Card</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>Feature Icon Card</h1>
-        <p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p>
-        <div class="detail-badges"><span>14 props</span><span>2 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureIconCard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Icon Card</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><FeatureIconCard icon='{playground_icon}' iconSize='{playground_iconSize}' iconVariant='{playground_iconVariant}' title='{playground_title}' description='{playground_description}' href='{playground_href}' actionLabel='{playground_actionLabel}' badge='{playground_badge}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' align='{playground_align}' hover='{playground_hover}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;FeatureIconCard
-  title="Feature Icon Card example"
-  description="A polished default feature icon card for a modern application."
-  href="#feature-icon-card-demo"
-  actionLabel="Feature Icon Card"
-  align="start"&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureIconCard&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-feature-icon-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-icon-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-icon-card-iconSize" name="pg_iconSize"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-iconVariant"><span><strong>icon Variant</strong><small>string</small></span><select id="playground-feature-icon-card-iconVariant" name="pg_iconVariant"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-feature-icon-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-icon-card-title" name="pg_title" type="text" value="Feature Icon Card example" /></label><label class="playground-field" for="playground-feature-icon-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-icon-card-description" name="pg_description" type="text" value="A polished default feature icon card for a modern application." /></label><label class="playground-field" for="playground-feature-icon-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-icon-card-href" name="pg_href" type="text" value="#feature-icon-card-demo" /></label><label class="playground-field" for="playground-feature-icon-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-icon-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Icon Card" /></label><label class="playground-field" for="playground-feature-icon-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-feature-icon-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-icon-card-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-icon-card-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-icon-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-icon-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-feature-icon-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-icon-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-feature-icon-card-hover"><span><strong>hover</strong><small>string</small></span><select id="playground-feature-icon-card-hover" name="pg_hover"><option value="lift" selected>lift</option><option value="none">none</option><option value="border">border</option><option value="glow">glow</option></select></label><label class="playground-field" for="playground-feature-icon-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-icon-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Icon-led capability card</h2><p>Use a compact card for one feature, benefit, or linked capability.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-icon-card-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Icon-led capability card usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureIconCard
-  icon="icon-[lucide--shield-check]"
-  title="Secure by design"
-  description="Build with consistent validation, accessibility, and theme support."
-  href="#security"
-  actionLabel="Review security"
-  badge="Core"
-  align="start"&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureIconCard&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered benefit card</h2><p>Center the content for short benefit grids and campaign proof points.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-icon-card-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureIconCard icon="icon-[lucide--gauge]" iconVariant="solid" title="Fast rendering" description="Server-first output with focused client behavior." href="#feature-icon-card-demo" actionLabel="Compact example" size="compact" color="info" variant="secondary" align="center" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Centered benefit card usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureIconCard
-  icon="icon-[lucide--gauge]"
-  iconVariant="solid"
-  title="Fast rendering"
-  description="Server-first output with focused client behavior."
-  href="#feature-icon-card-demo"
-  actionLabel="Compact example"
-  size="compact"
-  color="info"
-  variant="secondary"
-  align="center"&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureIconCard&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Highlighted linked card</h2><p>Use a stronger raised treatment for a featured capability.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="feature-icon-card-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><FeatureIconCard icon="icon-[lucide--workflow]" title="Composable workflows" description="Connect forms, services, data, and actions without duplicating UI." href="#workflows" actionLabel="Explore workflows" size="lg" color="success" variant="raised" align="end" hover="lift" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Highlighted linked card usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FeatureIconCard
-  icon="icon-[lucide--workflow]"
-  title="Composable workflows"
-  description="Connect forms, services, data, and actions without duplicating UI."
-  href="#workflows"
-  actionLabel="Explore workflows"
-  size="lg"
-  color="success"
-  variant="raised"
-  align="end"&gt;
-  &lt;div data-slot="footer"&gt;
-    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/FeatureIconCard&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>iconSize</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>iconVariant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Feature"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>"Explore"</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-icon-card-demo-1">Icon-led capability card</a><a href="#feature-icon-card-demo-2">Centered benefit card</a><a href="#feature-icon-card-demo-3">Highlighted linked card</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/feature-card"><small>Previous</small><strong>← Feature Card</strong></a>
-      <a href="/components/hero"><small>Next</small><strong>Hero →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/file-input.wrn

@@ -67,44 +67,46 @@ page FileInputDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Choose a document</h2><p>Select a PDF or image. The selected filename replaces the placeholder.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><FileInput size="default" label="File Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" multiple="false" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Choose a document usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileInput
-  label="File Input"
-  placeholder="Enter a sample value"
-  value="sample-1"
+  name="attachment"
+  label="Attachment"
+  accept=".pdf,image/*"
+  helperText="PDF or image"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Multiple attachments</h2><p>Select several files; each filename is shown in the control.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><FileInput size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" multiple="false" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><FileInput size="sm" name="attachments" label="Attachments" hiddenLabel="false" placeholder="Choose files" value="" icon="icon-[lucide--arrow-right]" multiple="true" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Multiple attachments usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileInput
   size="sm"
-  label="Compact example"
-  placeholder="Enter a sample value"
-  value="sample-2"
+  name="attachments"
+  label="Attachments"
+  placeholder="Choose files"
   icon="icon-[lucide--arrow-right]"
+  multiple="true"
   variant="secondary"
 /&gt;</code></pre>
           </section>
@@ -112,24 +114,25 @@ page FileInputDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Disabled upload</h2><p>A disabled control cannot open the file chooser.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><FileInput size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><FileInput size="lg" name="disabled-file" label="Attachment" hiddenLabel="false" placeholder="Uploads unavailable" value="" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="true" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Disabled upload usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileInput
   size="lg"
-  label="Advanced example"
-  placeholder="Search by name, email, or identifier"
-  value="sample-3"
+  name="disabled-file"
+  label="Attachment"
+  placeholder="Uploads unavailable"
   icon="icon-[lucide--trash-2]"
   variant="success"
+  disabled="true"
 /&gt;</code></pre>
           </section>
         </div>
@@ -176,7 +179,7 @@ if (component) registerOutputHandler(component, "invalid", (payload) =&gt; <span
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"File"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Choose a file"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--upload]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>accept</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Production default</a><a href="#file-input-demo-2">Compact application</a><a href="#file-input-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Choose a document</a><a href="#file-input-demo-2">Multiple attachments</a><a href="#file-input-demo-3">Disabled upload</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

examples/component-showcase/app/pages/components/file-upload-progress.wrn

@@ -3,17 +3,18 @@ page FileUploadProgressDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress"
-  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Upload progress"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "50")
   state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
   state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
-  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? ""
-  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? ""
-  state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? ""
+  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "brand-guidelines.pdf"
+  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "4.8 MB"
+  state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "2.4 MB"
   state playground_status = ctx.url.searchParams.get("pg_status") ?? "uploading"
-  state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "File Upload Progress"
-  state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "File Upload Progress"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "Cancel upload"
+  state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "Retry upload"
+  state playground_showCompleteAction = (ctx.url.searchParams.get("pg_showCompleteAction") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "File Upload Progress"
     description = "Theme-aware, responsive file upload progress component."
@@ -27,7 +28,7 @@ page FileUploadProgressDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>File Upload Progress</h1>
         <p>Theme-aware, responsive file upload progress component.</p>
-        <div class="detail-badges"><span>13 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>14 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -36,22 +37,22 @@ page FileUploadProgressDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><FileUploadProgress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' fileName='{playground_fileName}' fileSize='{playground_fileSize}' uploadedSize='{playground_uploadedSize}' status='{playground_status}' cancelLabel='{playground_cancelLabel}' retryLabel='{playground_retryLabel}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><FileUploadProgress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' fileName='{playground_fileName}' fileSize='{playground_fileSize}' uploadedSize='{playground_uploadedSize}' status='{playground_status}' cancelLabel='{playground_cancelLabel}' retryLabel='{playground_retryLabel}' showCompleteAction='{playground_showCompleteAction}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;FileUploadProgress
-  label="File Upload Progress"
-  value="36"
-  cancelLabel="File Upload Progress"
-  retryLabel="File Upload Progress"
+  label="Upload progress"
+  fileName="brand-guidelines.pdf"
+  fileSize="4.8 MB"
+  uploadedSize="2.4 MB"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="Upload progress" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="50" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="brand-guidelines.pdf" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="4.8 MB" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="2.4 MB" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="Cancel upload" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="Retry upload" /></label><label class="playground-toggle" for="playground-file-upload-progress-showCompleteAction"><span><strong>show Complete Action</strong><small>boolean</small></span><input id="playground-file-upload-progress-showCompleteAction" name="pg_showCompleteAction" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -67,15 +68,15 @@ page FileUploadProgressDetail {
           <div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><FileUploadProgress size="default" label="File Upload Progress" value="36" max="100" showValue="true" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileUploadProgress
-  label="File Upload Progress"
-  value="36"
-  cancelLabel="File Upload Progress"
-  retryLabel="File Upload Progress"
+  label="Upload progress"
+  fileName="brand-guidelines.pdf"
+  fileSize="4.8 MB"
+  uploadedSize="2.4 MB"
 /&gt;</code></pre>
           </section>
         </div>
@@ -89,16 +90,15 @@ page FileUploadProgressDetail {
           <div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><FileUploadProgress size="sm" label="Compact example" value="60" max="100" showValue="true" cancelLabel="Compact example" retryLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="error" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileUploadProgress
-  size="sm"
-  label="Compact example"
-  value="60"
-  cancelLabel="Compact example"
-  retryLabel="Compact example"
+  label="Upload progress"
+  fileName="brand-guidelines.pdf"
+  fileSize="4.8 MB"
+  status="error"
 /&gt;</code></pre>
           </section>
         </div>
@@ -112,16 +112,16 @@ page FileUploadProgressDetail {
           <div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><FileUploadProgress size="lg" label="Advanced example" value="84" max="100" showValue="true" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="100" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="complete" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileUploadProgress
-  size="lg"
-  label="Advanced example"
-  value="84"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
+  label="Upload progress"
+  value="100"
+  fileName="brand-guidelines.pdf"
+  fileSize="4.8 MB"
+  status="complete"
 /&gt;</code></pre>
           </section>
         </div>
@@ -145,7 +145,7 @@ if (component) registerOutputHandler(component, "retry", (payload) =&gt; <span>&
 if (component) registerOutputHandler(component, "complete", (payload) =&gt; <span>&#123;</span>
   console.log("complete", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fileName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>fileSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>uploadedSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>"uploading"</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel upload"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Retry upload"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fileName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>fileSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>uploadedSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>"uploading"</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel upload"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Retry upload"</code></td><td>No</td></tr><tr><td><code>showCompleteAction</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Production default</a><a href="#file-upload-progress-demo-2">Compact application</a><a href="#file-upload-progress-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

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

@@ -1,575 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page FooterDetail {
-  layout = "showcase"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Footer"
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"type\":\"header\",\"label\":\"Product\",\"description\":\"Build consistent interfaces with WRNexusJS.\",\"items\":[{\"label\":\"Components\",\"href\":\"/base\"},{\"label\":\"Themes\",\"href\":\"/themes\"},{\"label\":\"Examples\",\"href\":\"/blocks\"}]},{\"type\":\"header\",\"label\":\"Developers\",\"items\":[{\"label\":\"Documentation\",\"href\":\"/docs\"},{\"label\":\"Installation\",\"href\":\"/installation\"},{\"label\":\"Framework guides\",\"href\":\"/framework-guides\"}]},{\"type\":\"header\",\"label\":\"Resources\",\"items\":[{\"label\":\"Accessibility\",\"href\":\"/accessibility\"},{\"label\":\"Design tokens\",\"href\":\"/colors\"},{\"label\":\"Typography\",\"href\":\"/fonts\"}]},{\"type\":\"header\",\"label\":\"Company\",\"items\":[{\"label\":\"WorkRoot\",\"href\":\"https://workroot.in\",\"external\":true},{\"label\":\"WRNexusJS\",\"href\":\"https://wrnexusjs.dev\",\"external\":true}]}]")
-  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "4")
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "wide"
-  state playground_copyright = ctx.url.searchParams.get("pg_copyright") ?? ""
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Footer"
-    description = "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Footer</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
-        <h1>Footer</h1>
-        <p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p>
-        <div class="detail-badges"><span>8 props</span><span>4 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Footer" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,action">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Footer</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Footer size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' columns='{playground_columns}' maxWidth='{playground_maxWidth}' copyright='{playground_copyright}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Footer
-  label="Footer"
-  items='[
-    <span>&#123;</span>
-      "id": "footer-0-1",
-      "key": "footer-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "footer-0-2",
-      "key": "footer-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'&gt;
-  &lt;div data-slot="pre-footer"&gt;
-    &lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="post-footer"&gt;
-    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-left"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-right"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Footer&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-footer-size"><span><strong>size</strong><small>string</small></span><select id="playground-footer-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-footer-color"><span><strong>color</strong><small>string</small></span><select id="playground-footer-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-footer-label"><span><strong>label</strong><small>string</small></span><input id="playground-footer-label" name="pg_label" type="text" value="Footer" /></label><label class="playground-field" for="playground-footer-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "type": "header",
-    "label": "Product",
-    "description": "Build consistent interfaces with WRNexusJS.",
-    "items": [
-      &#123;
-        "label": "Components",
-        "href": "/base"
-      &#125;,
-      &#123;
-        "label": "Themes",
-        "href": "/themes"
-      &#125;,
-      &#123;
-        "label": "Examples",
-        "href": "/blocks"
-      &#125;
-    ]
-  &#125;,
-  &#123;
-    "type": "header",
-    "label": "Developers",
-    "items": [
-      &#123;
-        "label": "Documentation",
-        "href": "/docs"
-      &#125;,
-      &#123;
-        "label": "Installation",
-        "href": "/installation"
-      &#125;,
-      &#123;
-        "label": "Framework guides",
-        "href": "/framework-guides"
-      &#125;
-    ]
-  &#125;,
-  &#123;
-    "type": "header",
-    "label": "Resources",
-    "items": [
-      &#123;
-        "label": "Accessibility",
-        "href": "/accessibility"
-      &#125;,
-      &#123;
-        "label": "Design tokens",
-        "href": "/colors"
-      &#125;,
-      &#123;
-        "label": "Typography",
-        "href": "/fonts"
-      &#125;
-    ]
-  &#125;,
-  &#123;
-    "type": "header",
-    "label": "Company",
-    "items": [
-      &#123;
-        "label": "WorkRoot",
-        "href": "https://workroot.in",
-        "external": true
-      &#125;,
-      &#123;
-        "label": "WRNexusJS",
-        "href": "https://wrnexusjs.dev",
-        "external": true
-      &#125;
-    ]
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-footer-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="compact">compact</option><option value="xl">xl</option><option value="full">full</option><option value="lg">lg</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-footer-copyright"><span><strong>copyright</strong><small>string</small></span><input id="playground-footer-copyright" name="pg_copyright" type="text" value="" /></label><label class="playground-field" for="playground-footer-class"><span><strong>class</strong><small>string</small></span><input id="playground-footer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Four-column public footer</h2><p>Organize product, developer, resource, and company links into responsive columns.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="footer-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><Footer size="default" label="Footer" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="wide" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Four-column public footer usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Footer
-  label="Footer"
-  items='[
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Product",
-      "description": "Build consistent interfaces with WRNexusJS.",
-      "items": [
-        <span>&#123;</span>
-          "label": "Components",
-          "href": "/base"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Themes",
-          "href": "/themes"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Examples",
-          "href": "/blocks"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Developers",
-      "items": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "/docs"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Installation",
-          "href": "/installation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Framework guides",
-          "href": "/framework-guides"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Resources",
-      "items": [
-        <span>&#123;</span>
-          "label": "Accessibility",
-          "href": "/accessibility"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Design tokens",
-          "href": "/colors"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Typography",
-          "href": "/fonts"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Company",
-      "items": [
-        <span>&#123;</span>
-          "label": "WorkRoot",
-          "href": "https://workroot.in",
-          "external": true
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "WRNexusJS",
-          "href": "https://wrnexusjs.dev",
-          "external": true
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>
-  ]'
-  columns="4"
-  maxWidth="wide"
-  copyright="© 2026 WRNexusJS. All rights reserved."&gt;
-  &lt;div data-slot="pre-footer"&gt;
-    &lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="post-footer"&gt;
-    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-left"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-right"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Footer&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact application footer</h2><p>Use fewer columns and reduced spacing inside product applications.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="footer-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><Footer size="compact" label="Compact example" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]}]' columns="3" maxWidth="compact" copyright="WRNexusJS component showcase" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact application footer usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Footer
-  size="compact"
-  label="Compact example"
-  items='[
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Product",
-      "description": "Build consistent interfaces with WRNexusJS.",
-      "items": [
-        <span>&#123;</span>
-          "label": "Components",
-          "href": "/base"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Themes",
-          "href": "/themes"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Examples",
-          "href": "/blocks"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Developers",
-      "items": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "/docs"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Installation",
-          "href": "/installation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Framework guides",
-          "href": "/framework-guides"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Resources",
-      "items": [
-        <span>&#123;</span>
-          "label": "Accessibility",
-          "href": "/accessibility"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Design tokens",
-          "href": "/colors"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Typography",
-          "href": "/fonts"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>
-  ]'
-  copyright="WRNexusJS component showcase"&gt;
-  &lt;div data-slot="pre-footer"&gt;
-    &lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="post-footer"&gt;
-    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-left"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-right"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Footer&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width footer with slots</h2><p>Compose pre-footer, post-footer, and legal content around structured navigation.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="footer-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><Footer size="spacious" label="Advanced example" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="full" copyright="Built with WRNexusJS" class="showcase-instance showcase-instance--3"><div data-slot="pre-footer"><div class="showcase-footer-banner"><strong>Stay informed</strong><a href="#notifications">Manage notifications</a></div></div><div data-slot="copyright-right"><div class="showcase-footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a></div></div></Footer></div>
-          </div>
-          <section class="demo-code" aria-label="Full-width footer with slots usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Footer
-  size="spacious"
-  label="Advanced example"
-  items='[
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Product",
-      "description": "Build consistent interfaces with WRNexusJS.",
-      "items": [
-        <span>&#123;</span>
-          "label": "Components",
-          "href": "/base"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Themes",
-          "href": "/themes"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Examples",
-          "href": "/blocks"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Developers",
-      "items": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "/docs"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Installation",
-          "href": "/installation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Framework guides",
-          "href": "/framework-guides"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Resources",
-      "items": [
-        <span>&#123;</span>
-          "label": "Accessibility",
-          "href": "/accessibility"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Design tokens",
-          "href": "/colors"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Typography",
-          "href": "/fonts"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "type": "header",
-      "label": "Company",
-      "items": [
-        <span>&#123;</span>
-          "label": "WorkRoot",
-          "href": "https://workroot.in",
-          "external": true
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "WRNexusJS",
-          "href": "https://wrnexusjs.dev",
-          "external": true
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>
-  ]'
-  columns="4"
-  maxWidth="full"
-  copyright="Built with WRNexusJS"&gt;
-  &lt;div data-slot="pre-footer"&gt;
-    &lt;div class="showcase-footer-banner"&gt;&lt;strong&gt;Stay informed&lt;/strong&gt;&lt;a href="#notifications"&gt;Manage notifications&lt;/a&gt;&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="post-footer"&gt;
-    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-left"&gt;
-    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="copyright-right"&gt;
-    &lt;div class="showcase-footer-legal"&gt;&lt;a href="#privacy"&gt;Privacy&lt;/a&gt;&lt;a href="#terms"&gt;Terms&lt;/a&gt;&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Footer&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Footer
-  @select='console.log(payload)'
-  @action='console.log(payload)'
-/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
-
-const component = document.querySelector("[data-ui-component=\"Footer\"], [data-component=\"Footer\"]")
-
-if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
-  console.log("select", payload)
-<span>&#125;</span>)
-
-if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
-  console.log("action", payload)
-<span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Footer navigation"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>copyright</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#footer-demo-1">Four-column public footer</a><a href="#footer-demo-2">Compact application footer</a><a href="#footer-demo-3">Full-width footer with slots</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/feature-grid"><small>Previous</small><strong>← Feature Grid</strong></a>
-      <a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
-    </nav>
-  }
-}

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

@@ -120,7 +120,7 @@ page GridDetail {
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/footer"><small>Previous</small><strong>← Footer</strong></a>
+      <a href="/components/divider"><small>Previous</small><strong>← Divider</strong></a>
       <a href="/components/image"><small>Next</small><strong>Image →</strong></a>
     </nav>
   }

examples/component-showcase/app/pages/components/hero-actions.wrn

@@ -1,293 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page HeroActionsDetail {
-  layout = "showcase"
-  state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"label\":\"Browse components\",\"href\":\"#components\",\"icon\":\"icon-[lucide--blocks]\",\"variant\":\"primary\"},{\"label\":\"View metrics\",\"href\":\"#metrics\",\"icon\":\"icon-[lucide--chart-no-axes-column-increasing]\",\"variant\":\"outline\"}]")
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
-  state playground_stackOnMobile = (ctx.url.searchParams.get("pg_stackOnMobile") ?? "true") === "true"
-  state playground_fullWidthMobile = (ctx.url.searchParams.get("pg_fullWidthMobile") ?? "true") === "true"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Hero Actions"
-    description = "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Hero Actions</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>Hero Actions</h1>
-        <p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="HeroActions" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Hero Actions</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><HeroActions actions='{playground_actions}' align='{playground_align}' orientation='{playground_orientation}' stackOnMobile='{playground_stackOnMobile}' fullWidthMobile='{playground_fullWidthMobile}' size='{playground_size}' color='{playground_color}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;HeroActions
-  actions='[
-    <span>&#123;</span>
-      "id": "hero-actions-0-1",
-      "key": "hero-actions-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "hero-actions-0-2",
-      "key": "hero-actions-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  align="start"
-/&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-hero-actions-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "label": "Browse components",
-    "href": "#components",
-    "icon": "icon-[lucide--blocks]",
-    "variant": "primary"
-  &#125;,
-  &#123;
-    "label": "View metrics",
-    "href": "#metrics",
-    "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-    "variant": "outline"
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-actions-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-actions-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-actions-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-hero-actions-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-hero-actions-stackOnMobile"><span><strong>stack On Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-stackOnMobile" name="pg_stackOnMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-actions-fullWidthMobile"><span><strong>full Width Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-fullWidthMobile" name="pg_fullWidthMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-actions-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-actions-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-actions-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-actions-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-actions-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-actions-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Primary and secondary actions</h2><p>Group the most important hero actions with consistent spacing and hierarchy.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="hero-actions-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Primary and secondary actions usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;HeroActions
-  actions='[
-    <span>&#123;</span>
-      "label": "Browse components",
-      "href": "#components",
-      "icon": "icon-[lucide--blocks]",
-      "variant": "primary"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "View metrics",
-      "href": "#metrics",
-      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-      "variant": "outline"
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered campaign actions</h2><p>Center actions beneath a stacked hero or CTA message.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="hero-actions-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="center" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="sm" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Centered campaign actions usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;HeroActions
-  actions='[
-    <span>&#123;</span>
-      "label": "Browse components",
-      "href": "#components",
-      "icon": "icon-[lucide--blocks]",
-      "variant": "primary"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "View metrics",
-      "href": "#metrics",
-      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-      "variant": "outline"
-    <span>&#125;</span>
-  ]'
-  align="center"
-  size="sm"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Vertical mobile-first actions</h2><p>Use a vertical group for narrow panels, onboarding, or three-action flows.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="hero-actions-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"},{"label":"Contact support","href":"#support","icon":"icon-[lucide--life-buoy]","variant":"ghost"}]' align="end" orientation="vertical" stackOnMobile="true" fullWidthMobile="true" size="lg" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Vertical mobile-first actions usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;HeroActions
-  actions='[
-    <span>&#123;</span>
-      "label": "Browse components",
-      "href": "#components",
-      "icon": "icon-[lucide--blocks]",
-      "variant": "primary"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "View metrics",
-      "href": "#metrics",
-      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-      "variant": "outline"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Contact support",
-      "href": "#support",
-      "icon": "icon-[lucide--life-buoy]",
-      "variant": "ghost"
-    <span>&#125;</span>
-  ]'
-  align="end"
-  orientation="vertical"
-  size="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>stackOnMobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullWidthMobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#hero-actions-demo-1">Primary and secondary actions</a><a href="#hero-actions-demo-2">Centered campaign actions</a><a href="#hero-actions-demo-3">Vertical mobile-first actions</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/hero"><small>Previous</small><strong>← Hero</strong></a>
-      <a href="/components/marketing-section-header"><small>Next</small><strong>Marketing Section Header →</strong></a>
-    </nav>
-  }
-}

examples/component-showcase/app/pages/components/input-group.wrn

@@ -4,17 +4,17 @@ page InputGroupDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? "workspace-url"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Workspace address"
   state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "your-team"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
-  state playground_startText = ctx.url.searchParams.get("pg_startText") ?? ""
-  state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ""
+  state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "https://"
+  state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ".example.com"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Input Group"
+  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? ""
   state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
@@ -23,7 +23,7 @@ page InputGroupDetail {
   state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Input Group"
     description = "Theme-aware, responsive input group component."
@@ -50,10 +50,11 @@ page InputGroupDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;InputGroup
-  label="Input Group"
-  value="sample-1"
-  placeholder="Enter a sample value"
-  actionLabel="Input Group"
+  name="workspace-url"
+  label="Workspace address"
+  placeholder="your-team"
+  startText="https://"
+  endText=".example.com"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -61,7 +62,7 @@ page InputGroupDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Input Group" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="Input Group" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></span><inputLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="workspace-url" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Workspace address" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="your-team" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="https://" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value=".example.com" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></spLine truncated
         </form>
       </div>
     </section>
@@ -77,15 +78,16 @@ page InputGroupDetail {
           <div id="input-group-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><InputGroup size="default" label="Input Group" hiddenLabel="false" value="sample-1" placeholder="Enter a sample value" icon="" actionLabel="Input Group" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="https://" endText=".example.com" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;InputGroup
-  label="Input Group"
-  value="sample-1"
-  placeholder="Enter a sample value"
-  actionLabel="Input Group"
+  name="workspace-url"
+  label="Workspace address"
+  placeholder="your-team"
+  startText="https://"
+  endText=".example.com"
 /&gt;</code></pre>
           </section>
         </div>
@@ -99,18 +101,16 @@ page InputGroupDetail {
           <div id="input-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><InputGroup size="sm" label="Compact example" hiddenLabel="false" value="sample-2" placeholder="Enter a sample value" icon="icon-[lucide--arrow-right]" actionLabel="Compact example" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="icon-[lucide--search]" iconPosition="start" actionLabel="Search" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;InputGroup
-  size="sm"
-  label="Compact example"
-  value="sample-2"
-  placeholder="Enter a sample value"
-  icon="icon-[lucide--arrow-right]"
-  actionLabel="Compact example"
-  variant="secondary"
+  name="workspace-url"
+  label="Workspace address"
+  placeholder="your-team"
+  icon="icon-[lucide--search]"
+  actionLabel="Search"
 /&gt;</code></pre>
           </section>
         </div>
@@ -124,18 +124,14 @@ page InputGroupDetail {
           <div id="input-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><InputGroup size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" placeholder="Search by name, email, or identifier" icon="icon-[lucide--trash-2]" actionLabel="Advanced example" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;InputGroup
-  size="lg"
-  label="Advanced example"
-  value="sample-3"
-  placeholder="Search by name, email, or identifier"
-  icon="icon-[lucide--trash-2]"
-  actionLabel="Advanced example"
-  variant="success"
+  name="workspace-url"
+  label="Workspace address"
+  placeholder="your-team"
 /&gt;</code></pre>
           </section>
         </div>

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

@@ -16,6 +16,7 @@ page InputDetail {
   state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
+  state playground_invalidMessage = ctx.url.searchParams.get("pg_invalidMessage") ?? ""
   state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
   state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
@@ -42,7 +43,7 @@ page InputDetail {
         <span class="showcase-eyebrow">Forms component</span>
         <h1>Input</h1>
         <p>Theme-aware, responsive input component.</p>
-        <div class="detail-badges"><span>28 props</span><span>0 slots</span><span>7 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>29 props</span><span>0 slots</span><span>7 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -51,7 +52,7 @@ page InputDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Input size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' type='{playground_type}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' autocomplete='{playground_autocomplete}' inputmode='{playground_inputmode}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' pattern='{playground_pattern}' min='{playground_min}' max='{playground_max}' step='{playground_step}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Input size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' type='{playground_type}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' invalidMessage='{playground_invalidMessage}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' autocomplete='{playground_autocomplete}' inputmode='{playground_inputmode}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' pattern='{playground_pattern}' min='{playground_min}' max='{playground_max}' step='{playground_step}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Input
@@ -63,8 +64,8 @@ page InputDetail {
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Input" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true">Line truncated
+          <header><div><span>Component props</span><strong>29 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Input" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-input-invalidMessage"><span><strong>invalid Message</strong><small>string</small></span><input id="playground-input-invalidMessage" name="pg_invalidMessage" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated
         </form>
       </div>
     </section>
@@ -178,7 +179,7 @@ if (component) registerOutputHandler(component, "keydown", (payload) =&gt; <span
 if (component) registerOutputHandler(component, "keyup", (payload) =&gt; <span>&#123;</span>
   console.log("keyup", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inputmode</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalidMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inputmode</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-demo-1">Production default</a><a href="#input-demo-2">Compact application</a><a href="#input-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

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

@@ -3,8 +3,8 @@ page KbdDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Kbd"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "⌘ K"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Kbd"
     description = "Theme-aware, responsive kbd component."
@@ -31,7 +31,7 @@ page KbdDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Kbd
-  label="Kbd"
+  label="⌘ K"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -39,7 +39,7 @@ page KbdDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="Kbd" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="⌘ K" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -55,12 +55,12 @@ page KbdDetail {
           <div id="kbd-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Kbd size="default" label="Kbd" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Kbd size="default" color="primary" label="⌘ K" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Kbd
-  label="Kbd"
+  label="⌘ K"
 /&gt;</code></pre>
           </section>
         </div>
@@ -74,13 +74,12 @@ page KbdDetail {
           <div id="kbd-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Kbd size="sm" label="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Kbd size="default" color="primary" label="Esc" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Kbd
-  size="sm"
-  label="Compact example"
+  label="Esc"
 /&gt;</code></pre>
           </section>
         </div>
@@ -94,13 +93,12 @@ page KbdDetail {
           <div id="kbd-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Kbd size="lg" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Kbd size="default" color="primary" label="Ctrl + Enter" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Kbd
-  size="lg"
-  label="Advanced example"
+  label="Ctrl + Enter"
 /&gt;</code></pre>
           </section>
         </div>

examples/component-showcase/app/pages/components/layout-splitter.wrn

@@ -30,7 +30,7 @@ page LayoutSplitterDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><LayoutSplitter color='{playground_color}' size='{playground_size}' orientation='{playground_orientation}' minSize='{playground_minSize}' step='{playground_step}' label='{playground_label}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><LayoutSplitter color='{playground_color}' size='{playground_size}' orientation='{playground_orientation}' minSize='{playground_minSize}' step='{playground_step}' label='{playground_label}' class='{playground_class}'><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;LayoutSplitter
@@ -64,7 +64,7 @@ page LayoutSplitterDetail {
           <div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
           </div>
           <section class="demo-code" aria-label="Drag or arrow the divider usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -90,7 +90,7 @@ page LayoutSplitterDetail {
           <div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
           </div>
           <section class="demo-code" aria-label="Stacked panes usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>

examples/component-showcase/app/pages/components/legend-indicator.wrn

@@ -33,118 +33,123 @@ page LegendIndicatorDetail {
           <div class="playground-preview-source" data-playground-preview><LegendIndicator size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;LegendIndicator
-  title="Legend Indicator example"
-  description="A polished default legend indicator for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "legend-indicator-0-1",
-      "key": "legend-indicator-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "legend-indicator-0-2",
-      "key": "legend-indicator-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page LegendIndicatorExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "legend-indicator-0-1",
+    "key": "legend-indicator-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#legend-indicator-demo",
+    "actionHref": "#legend-indicator-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "legend-indicator-0-2",
+    "key": "legend-indicator-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#legend-indicator-demo",
+    "actionHref": "#legend-indicator-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;LegendIndicator
+      title="Legend Indicator example"
+      description="A polished default legend indicator for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -267,389 +272,43 @@ page LegendIndicatorDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Chart legend</h2><p>Toggle a series and handle @toggle to update your chart.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="legend-indicator-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><LegendIndicator size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items='[{"id":"legend-indicator-0-1","key":"legend-indicator-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Chart legend usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;LegendIndicator
-  title="Legend Indicator example"
-  description="A polished default legend indicator for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "legend-indicator-0-1",
-      "key": "legend-indicator-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "legend-indicator-0-2",
-      "key": "legend-indicator-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="legend-indicator-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><LegendIndicator size="sm" title="Compact Legend Indicator" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"legend-indicator-1-1","key":"legend-indicator-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-1-2","key":"legend-indicator-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact application usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;LegendIndicator
-  size="sm"
-  title="Compact Legend Indicator"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "legend-indicator-1-1",
-      "key": "legend-indicator-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "legend-indicator-1-2",
-      "key": "legend-indicator-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="secondary"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="legend-indicator-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><LegendIndicator size="lg" title="Advanced Legend Indicator" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"legend-indicator-2-1","key":"legend-indicator-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"legend-indicator-2-2","key":"legend-indicator-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;LegendIndicator
-  size="lg"
-  title="Advanced Legend Indicator"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "legend-indicator-2-1",
-      "key": "legend-indicator-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "legend-indicator-2-2",
-      "key": "legend-indicator-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#legend-indicator-demo",
-      "actionHref": "#legend-indicator-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page LegendIndicatorExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Direct",
+    "color": "#8b5cf6",
+    "value": "42%"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Search",
+    "color": "#14b8a6",
+    "value": "35%"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Referral",
+    "color": "#f59e0b",
+    "value": "23%"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;LegendIndicator
+      title="Traffic sources"
+      description="Select a source to toggle its visibility."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -670,7 +329,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Legend Indicator"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#legend-indicator-demo-1">Production default</a><a href="#legend-indicator-demo-2">Compact application</a><a href="#legend-indicator-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#legend-indicator-demo-1">Chart legend</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -125,7 +125,7 @@ page LinkDetail {
     </div>
     <nav class="detail-pagination">
       <a href="/components/layout-splitter"><small>Previous</small><strong>← Layout Splitter</strong></a>
-      <a href="/components/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
+      <a href="/components/section"><small>Next</small><strong>Section →</strong></a>
     </nav>
   }
 }

examples/component-showcase/app/pages/components/list-group.wrn

@@ -3,11 +3,12 @@ page ListGroupDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "List Group example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list group for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"list-group-0-1\",\"key\":\"list-group-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#list-group-demo\",\"actionHref\":\"#list-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"list-group-0-2\",\"key\":\"list-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#list-group-demo\",\"actionHref\":\"#list-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Workspace"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"value\":\"inbox\",\"label\":\"Inbox\",\"description\":\"Messages that need your attention\",\"icon\":\"icon-[lucide--inbox]\",\"badge\":\"8\"},{\"value\":\"projects\",\"label\":\"Projects\",\"description\":\"Your team's active work\",\"icon\":\"icon-[lucide--folder]\"},{\"value\":\"archive\",\"label\":\"Archive\",\"description\":\"Completed conversations\",\"icon\":\"icon-[lucide--archive]\"}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "inbox"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "List Group"
     description = "Theme-aware, responsive list group component."
@@ -21,7 +22,7 @@ page ListGroupDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>List Group</h1>
         <p>Theme-aware, responsive list group component.</p>
-        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -30,235 +31,66 @@ page ListGroupDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><ListGroup size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><ListGroup size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' value='{playground_value}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;ListGroup
-  title="List Group example"
-  description="A polished default list group for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "list-group-0-1",
-      "key": "list-group-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "list-group-0-2",
-      "key": "list-group-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page ListGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "value": "inbox",
+    "label": "Inbox",
+    "description": "Messages that need your attention",
+    "icon": "icon-[lucide--inbox]",
+    "badge": "8"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "projects",
+    "label": "Projects",
+    "description": "Your team's active work",
+    "icon": "icon-[lucide--folder]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "archive",
+    "label": "Archive",
+    "description": "Completed conversations",
+    "icon": "icon-[lucide--archive]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ListGroup
+      title="Workspace"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="inbox"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="List Group example" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="A polished default list group for a modern application." /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="Workspace" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
-    "id": "list-group-0-1",
-    "key": "list-group-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#list-group-demo",
-    "actionHref": "#list-group-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "value": "inbox",
+    "label": "Inbox",
+    "description": "Messages that need your attention",
+    "icon": "icon-[lucide--inbox]",
+    "badge": "8"
   &#125;,
   &#123;
-    "id": "list-group-0-2",
-    "key": "list-group-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#list-group-demo",
-    "actionHref": "#list-group-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "value": "projects",
+    "label": "Projects",
+    "description": "Your team's active work",
+    "icon": "icon-[lucide--folder]"
+  &#125;,
+  &#123;
+    "value": "archive",
+    "label": "Archive",
+    "description": "Completed conversations",
+    "icon": "icon-[lucide--archive]"
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-list-group-value" name="pg_value" type="text" value="inbox" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -274,122 +106,40 @@ page ListGroupDetail {
           <div id="list-group-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ListGroup size="default" title="List Group example" description="A polished default list group for a modern application." items='[{"id":"list-group-0-1","key":"list-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ListGroup
-  title="List Group example"
-  description="A polished default list group for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "list-group-0-1",
-      "key": "list-group-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "list-group-0-2",
-      "key": "list-group-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page ListGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "value": "inbox",
+    "label": "Inbox",
+    "description": "Messages that need your attention",
+    "icon": "icon-[lucide--inbox]",
+    "badge": "8"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "projects",
+    "label": "Projects",
+    "description": "Your team's active work",
+    "icon": "icon-[lucide--folder]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "archive",
+    "label": "Archive",
+    "description": "Completed conversations",
+    "icon": "icon-[lucide--archive]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ListGroup
+      title="Workspace"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="inbox"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -402,124 +152,40 @@ page ListGroupDetail {
           <div id="list-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ListGroup size="sm" title="Compact List Group" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"list-group-1-1","key":"list-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-1-2","key":"list-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ListGroup
-  size="sm"
-  title="Compact List Group"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "list-group-1-1",
-      "key": "list-group-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "list-group-1-2",
-      "key": "list-group-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page ListGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "value": "inbox",
+    "label": "Inbox",
+    "description": "Messages that need your attention",
+    "icon": "icon-[lucide--inbox]",
+    "badge": "8"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "projects",
+    "label": "Projects",
+    "description": "Your team's active work",
+    "icon": "icon-[lucide--folder]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "archive",
+    "label": "Archive",
+    "description": "Completed conversations",
+    "icon": "icon-[lucide--archive]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ListGroup
+      title="Workspace"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="inbox"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -532,124 +198,40 @@ page ListGroupDetail {
           <div id="list-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ListGroup size="lg" title="Advanced List Group" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"list-group-2-1","key":"list-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"list-group-2-2","key":"list-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ListGroup
-  size="lg"
-  title="Advanced List Group"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "list-group-2-1",
-      "key": "list-group-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "list-group-2-2",
-      "key": "list-group-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#list-group-demo",
-      "actionHref": "#list-group-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page ListGroupExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "value": "inbox",
+    "label": "Inbox",
+    "description": "Messages that need your attention",
+    "icon": "icon-[lucide--inbox]",
+    "badge": "8"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "projects",
+    "label": "Projects",
+    "description": "Your team's active work",
+    "icon": "icon-[lucide--folder]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "value": "archive",
+    "label": "Archive",
+    "description": "Completed conversations",
+    "icon": "icon-[lucide--archive]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;ListGroup
+      title="Workspace"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="inbox"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -667,7 +249,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
 if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
   console.log("change", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-group-demo-1">Production default</a><a href="#list-group-demo-2">Compact application</a><a href="#list-group-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

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

@@ -33,118 +33,123 @@ page ListDetail {
           <div class="playground-preview-source" data-playground-preview><List size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;List
-  title="List example"
-  description="A polished default list for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "list-0-1",
-      "key": "list-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "list-0-2",
-      "key": "list-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page ListExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "list-0-1",
+    "key": "list-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#list-demo",
+    "actionHref": "#list-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "list-0-2",
+    "key": "list-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#list-demo",
+    "actionHref": "#list-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;List
+      title="List example"
+      description="A polished default list for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -278,27 +283,32 @@ page ListDetail {
           </div>
           <section class="demo-code" aria-label="Linked resource list usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;List
-  title="Citizen resources"
-  description="Commonly requested public information."
-  items='[
-    <span>&#123;</span>
-      "label": "Report crime",
-      "href": "#report",
-      "icon": "icon-[lucide--shield-alert]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Track complaint",
-      "href": "#track",
-      "icon": "icon-[lucide--scan-search]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Certificates",
-      "href": "#certificates",
-      "icon": "icon-[lucide--file-check-2]"
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page ListExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Report crime",
+    "href": "#report",
+    "icon": "icon-[lucide--shield-alert]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Track complaint",
+    "href": "#track",
+    "icon": "icon-[lucide--scan-search]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Certificates",
+    "href": "#certificates",
+    "icon": "icon-[lucide--file-check-2]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;List
+      title="Citizen resources"
+      description="Commonly requested public information."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -315,26 +325,31 @@ page ListDetail {
           </div>
           <section class="demo-code" aria-label="Compact status list usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;List
-  size="sm"
-  title="Current status"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "label": "Application received",
-      "status": "Complete"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Verification",
-      "status": "In progress"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Decision",
-      "status": "Pending"
-    <span>&#125;</span>
-  ]'
-  variant="soft"
-/&gt;</code></pre>
+            <pre><code>page ListExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Application received",
+    "status": "Complete"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Verification",
+    "status": "In progress"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Decision",
+    "status": "Pending"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;List
+      size="sm"
+      title="Current status"
+      description="A compact configuration for dashboards and dense product surfaces."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="soft"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -351,26 +366,31 @@ page ListDetail {
           </div>
           <section class="demo-code" aria-label="Rich action list usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;List
-  size="lg"
-  title="Service requests"
-  description="Recent requests and their current status."
-  items='[
-    <span>&#123;</span>
-      "label": "Address verification",
-      "description": "Submitted yesterday",
-      "status": "Review",
-      "href": "#request-1"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Character certificate",
-      "description": "Submitted 3 days ago",
-      "status": "Approved",
-      "href": "#request-2"
-    <span>&#125;</span>
-  ]'
-  variant="raised"
-/&gt;</code></pre>
+            <pre><code>page ListExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Address verification",
+    "description": "Submitted yesterday",
+    "status": "Review",
+    "href": "#request-1"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Character certificate",
+    "description": "Submitted 3 days ago",
+    "status": "Approved",
+    "href": "#request-2"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;List
+      size="lg"
+      title="Service requests"
+      description="Recent requests and their current status."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="raised"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -3,10 +3,19 @@ page MapDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Map example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default map for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"map-0-1\",\"key\":\"map-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"map-0-2\",\"key\":\"map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Bengaluru"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "Interactive geographic map"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_provider = ctx.url.searchParams.get("pg_provider") ?? "openstreetmap"
+  state playground_apiKey = ctx.url.searchParams.get("pg_apiKey") ?? ""
+  state playground_query = ctx.url.searchParams.get("pg_query") ?? ""
+  state playground_latitude = Number(ctx.url.searchParams.get("pg_latitude") ?? "12.9716")
+  state playground_longitude = Number(ctx.url.searchParams.get("pg_longitude") ?? "77.5946")
+  state playground_zoomLevel = Number(ctx.url.searchParams.get("pg_zoomLevel") ?? "13")
+  state playground_mapType = ctx.url.searchParams.get("pg_mapType") ?? "roadmap"
+  state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? ""
+  state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "Map background"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Map"
@@ -21,7 +30,7 @@ page MapDetail {
         <span class="showcase-eyebrow">Integrations component</span>
         <h1>Map</h1>
         <p>Present responsive location information and markers with map-ready metadata and movement or marker events.</p>
-        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>16 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -30,129 +39,12 @@ page MapDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Map size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Map size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' provider='{playground_provider}' apiKey='{playground_apiKey}' query='{playground_query}' latitude='{playground_latitude}' longitude='{playground_longitude}' zoomLevel='{playground_zoomLevel}' mapType='{playground_mapType}' imageSrc='{playground_imageSrc}' imageAlt='{playground_imageAlt}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Map
-  title="Map example"
-  description="A polished default map for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "map-0-1",
-      "key": "map-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "map-0-2",
-      "key": "map-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
+            <pre><code data-playground-code>page MapExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
     "id": "map-0-1",
     "key": "map-0-1",
     "value": "primary",
@@ -181,31 +73,31 @@ page MapDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      &#123;
+      <span>&#123;</span>
         "label": "Nested option A",
         "value": "nested-a"
-      &#125;,
-      &#123;
+      <span>&#125;</span>,
+      <span>&#123;</span>
         "label": "Nested option B",
         "value": "nested-b"
-      &#125;
+      <span>&#125;</span>
     ],
     "links": [
-      &#123;
+      <span>&#123;</span>
         "label": "Documentation",
         "href": "#documentation"
-      &#125;,
-      &#123;
+      <span>&#125;</span>,
+      <span>&#123;</span>
         "label": "API reference",
         "href": "#api-reference"
-      &#125;
+      <span>&#125;</span>
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  &#125;,
-  &#123;
+  <span>&#125;</span>,
+  <span>&#123;</span>
     "id": "map-0-2",
     "key": "map-0-2",
     "value": "secondary",
@@ -234,31 +126,46 @@ page MapDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      &#123;
+      <span>&#123;</span>
         "label": "Nested option A",
         "value": "nested-a"
-      &#125;,
-      &#123;
+      <span>&#125;</span>,
+      <span>&#123;</span>
         "label": "Nested option B",
         "value": "nested-b"
-      &#125;
+      <span>&#125;</span>
     ],
     "links": [
-      &#123;
+      <span>&#123;</span>
         "label": "Documentation",
         "href": "#documentation"
-      &#125;,
-      &#123;
+      <span>&#125;</span>,
+      <span>&#123;</span>
         "label": "API reference",
         "href": "#api-reference"
-      &#125;
+      <span>&#125;</span>
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Map
+      title="Map example"
+      description="A polished default map for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
+          </section>
+          <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
+        </div>
+        <form class="playground-controls" data-playground-form>
+          <header><div><span>Component props</span><strong>16 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Bengaluru" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="Interactive geographic map" /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-map-provider"><span><strong>provider</strong><small>string</small></span><select id="playground-map-provider" name="pg_provider"><option value="openstreetmap" selected>openstreetmap</option><option value="google">google</option></select></label><label class="playground-field" for="playground-map-apiKey"><span><strong>api Key</strong><small>string</small></span><input id="playground-map-apiKey" name="pg_apiKey" type="text" value="" /></label><label class="playground-field" for="playground-map-query"><span><strong>query</strong><small>string</small></span><input id="playground-map-query" name="pg_query" type="text" value="" /></label><label class="playground-field" for="playground-map-latitude"><span><strong>latitude</strong><small>number</small></span><input id="playground-map-latitude" name="pg_latitude" type="number" value="12.9716" /></label><label class="playground-field" for="playground-map-longitude"><span><strong>longitude</strong><small>number</small></span><input id="playground-map-longitude" name="pg_longitude" type="number" value="77.5946" /></label><label class="playground-field" for="playground-map-zoomLevel"><span><strong>zoom Level</strong><small>number</small></span><input id="playground-map-zoomLevel" name="pg_zoomLevel" type="number" value="13" /></label><label class="playground-field" for="playground-map-mapType"><span><strong>map Type</strong><small>string</small></span><input id="playground-map-mapType" name="pg_mapType" type="text" value="roadmap" /></label><label class="playground-field" for="playground-map-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-map-imageSrc" name="pg_imageSrc" type="text" value="" /></label><label class="playground-field" for="playground-map-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-map-imageAlt" name="pg_imageAlt" type="text" value="Map background" /></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -267,97 +174,57 @@ page MapDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Station directory map</h2><p>Present locations with supporting names, addresses, and actions.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>OpenStreetMap</h2><p>A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="map-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Map size="default" title="Nearby police stations" description="Select a station to view contact details and jurisdiction information." items='[{"title":"Central station","description":"Main Road","latitude":18.5204,"longitude":73.8567},{"title":"North station","description":"University Road","latitude":18.559,"longitude":73.807}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Map size="default" title="Bengaluru" description="Pan and zoom to explore the city" items='[]' variant="default" provider="openstreetmap" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Station directory map usage">
+          <section class="demo-code" aria-label="OpenStreetMap usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Map
-  title="Nearby police stations"
-  description="Select a station to view contact details and jurisdiction information."
-  items='[
-    <span>&#123;</span>
-      "title": "Central station",
-      "description": "Main Road",
-      "latitude": 18.5204,
-      "longitude": 73.8567
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "title": "North station",
-      "description": "University Road",
-      "latitude": 18.559,
-      "longitude": 73.807
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page MapExample <span>&#123;</span>
+  state items = []
+  view <span>&#123;</span>
+    &lt;Map
+      title="Bengaluru"
+      description="Pan and zoom to explore the city"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact location preview</h2><p>Use a smaller map preview inside cards, drawers, and record details.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Google Maps</h2><p>Pass your restricted Maps Embed API key and a place query to show Google Maps.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="map-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Map size="sm" title="Service location" description="Public service office" items='[{"title":"Public office","description":"City centre"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Map size="sm" title="Google Maps" description="A compact configuration for dashboards and dense product surfaces." items='[]' variant="secondary" provider="google" apiKey="" query="Bengaluru" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact location preview usage">
+          <section class="demo-code" aria-label="Google Maps usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Map
-  size="sm"
-  title="Service location"
-  description="Public service office"
-  items='[
-    <span>&#123;</span>
-      "title": "Public office",
-      "description": "City centre"
-    <span>&#125;</span>
-  ]'
-  variant="soft"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Operations map</h2><p>Use a larger map surface for multiple markers and operational context.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="map-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><Map size="lg" color="info" title="Jurisdiction overview" description="Stations, service areas, and public facilities." items='[{"title":"Station A"},{"title":"Station B"},{"title":"Control room"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Operations map usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Map
-  size="lg"
-  color="info"
-  title="Jurisdiction overview"
-  description="Stations, service areas, and public facilities."
-  items='[
-    <span>&#123;</span>
-      "title": "Station A"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "title": "Station B"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "title": "Control room"
-    <span>&#125;</span>
-  ]'
-  variant="raised"
-/&gt;</code></pre>
+            <pre><code>page MapExample <span>&#123;</span>
+  state items = []
+  view <span>&#123;</span>
+    &lt;Map
+      size="sm"
+      title="Google Maps"
+      description="A compact configuration for dashboards and dense product surfaces."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="secondary"
+      provider="google"
+      query="Bengaluru"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -380,10 +247,10 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
 if (component) registerOutputHandler(component, "zoom", (payload) =&gt; <span>&#123;</span>
   console.log("zoom", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>provider</code></td><td>string</td><td><code>"openstreetmap"</code></td><td>No</td></tr><tr><td><code>apiKey</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>query</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>latitude</code></td><td>number</td><td><code>12.9716</code></td><td>No</td></tr><tr><td><code>longitude</code></td><td>number</td><td><code>77.5946</code></td><td>No</td></tr><tr><td><code>zoomLevel</code></td><td>number</td><td><code>13</code></td><td>No</td></tr><tr><td><code>mapType</code></td><td>string</td><td><code>"roadmap"</code></td><td>No</td></tr><tr><td><code>imageSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageAlt</code></td><td>string</td><td><code>"Map background"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">Station directory map</a><a href="#map-demo-2">Compact location preview</a><a href="#map-demo-3">Operations map</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">OpenStreetMap</a><a href="#map-demo-2">Google Maps</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

examples/component-showcase/app/pages/components/marketing-section-header.wrn

@@ -1,171 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page MarketingSectionHeaderDetail {
-  layout = "showcase"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marketing Section Header example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marketing section header for a modern application."
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Marketing Section Header"
-  state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#marketing-section-header-demo"
-  state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
-  state playground_actionExternal = (ctx.url.searchParams.get("pg_actionExternal") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Marketing Section Header"
-    description = "Introduce marketing content with an eyebrow, title, description, and optional linked action."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Marketing Section Header</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>Marketing Section Header</h1>
-        <p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p>
-        <div class="detail-badges"><span>12 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MarketingSectionHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Marketing Section Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><MarketingSectionHeader id='{playground_id}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' align='{playground_align}' size='{playground_size}' color='{playground_color}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' actionExternal='{playground_actionExternal}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;MarketingSectionHeader
-  title="Marketing Section Header example"
-  description="A polished default marketing section header for a modern application."
-  align="start"
-  actionLabel="Marketing Section Header"
-  actionHref="#marketing-section-header-demo"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/MarketingSectionHeader&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-marketing-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-marketing-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-marketing-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-marketing-section-header-title" name="pg_title" type="text" value="Marketing Section Header example" /></label><label class="playground-field" for="playground-marketing-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-marketing-section-header-description" name="pg_description" type="text" value="A polished default marketing section header for a modern application." /></label><label class="playground-field" for="playground-marketing-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-marketing-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="split">split</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-marketing-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-marketing-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marketing-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-marketing-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marketing-section-header-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-marketing-section-header-actionLabel" name="pg_actionLabel" type="text" value="Marketing Section Header" /></label><label class="playground-field" for="playground-marketing-section-header-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-marketing-section-header-actionHref" name="pg_actionHref" type="text" value="#marketing-section-header-demo" /></label><label class="playground-field" for="playground-marketing-section-header-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-marketing-section-header-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-marketing-section-header-actionExternal"><span><strong>action External</strong><small>boolean</small></span><input id="playground-marketing-section-header-actionExternal" name="pg_actionExternal" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-marketing-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-marketing-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Split header with action</h2><p>Pair marketing copy with a clear secondary navigation action.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="marketing-section-header-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Split header with action usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;MarketingSectionHeader
-  eyebrow="Platform capabilities"
-  title="Build complete public experiences"
-  description="Use reusable sections, cards, metrics, heroes, and CTAs."
-  actionLabel="Explore components"
-  actionHref="#components"
-  actionIcon="icon-[lucide--arrow-right]"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/MarketingSectionHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered marketing header</h2><p>Use a centered configuration above campaigns, proof, and feature collections.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="marketing-section-header-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><MarketingSectionHeader eyebrow="Why WRNexusJS" title="One coherent design system" description="Consistent presentation across public pages and product applications." align="center" size="compact" actionLabel="Compact example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Centered marketing header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;MarketingSectionHeader
-  eyebrow="Why WRNexusJS"
-  title="One coherent design system"
-  description="Consistent presentation across public pages and product applications."
-  align="center"
-  size="compact"
-  actionLabel="Compact example"
-  actionHref="#marketing-section-header-demo"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/MarketingSectionHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>External resource header</h2><p>Link to supporting documentation or an external resource.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="marketing-section-header-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><MarketingSectionHeader eyebrow="Developer resources" title="Learn the framework through working examples" description="Every component page includes live demos, playground controls, events, and API details." align="split" size="large" actionLabel="Open documentation" actionHref="https://wrnexusjs.dev" actionExternal="true" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="External resource header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;MarketingSectionHeader
-  eyebrow="Developer resources"
-  title="Learn the framework through working examples"
-  description="Every component page includes live demos, playground controls, events, and API details."
-  size="large"
-  actionLabel="Open documentation"
-  actionHref="https://wrnexusjs.dev"
-  actionExternal="true"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/MarketingSectionHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"split"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionExternal</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marketing-section-header-demo-1">Split header with action</a><a href="#marketing-section-header-demo-2">Centered marketing header</a><a href="#marketing-section-header-demo-3">External resource header</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
-      <a href="/components/page-header"><small>Next</small><strong>Page Header →</strong></a>
-    </nav>
-  }
-}

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

@@ -33,118 +33,123 @@ page MarqueeDetail {
           <div class="playground-preview-source" data-playground-preview><Marquee size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Marquee
-  title="Marquee example"
-  description="A polished default marquee for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "marquee-0-1",
-      "key": "marquee-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "marquee-0-2",
-      "key": "marquee-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page MarqueeExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "marquee-0-1",
+    "key": "marquee-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#marquee-demo",
+    "actionHref": "#marquee-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "marquee-0-2",
+    "key": "marquee-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#marquee-demo",
+    "actionHref": "#marquee-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Marquee
+      title="Marquee example"
+      description="A polished default marquee for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -278,27 +283,32 @@ page MarqueeDetail {
           </div>
           <section class="demo-code" aria-label="Partner and capability strip usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Marquee
-  title="Supported capabilities"
-  description="A polished default marquee for a modern application."
-  items='[
-    <span>&#123;</span>
-      "label": "SSR"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "CSR"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Themes"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Accessibility"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Responsive UI"
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page MarqueeExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "SSR"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "CSR"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Themes"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Accessibility"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Responsive UI"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Marquee
+      title="Supported capabilities"
+      description="A polished default marquee for a modern application."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -315,23 +325,28 @@ page MarqueeDetail {
           </div>
           <section class="demo-code" aria-label="Compact announcement ticker usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Marquee
-  size="sm"
-  title="Compact Marquee"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "label": "All services operational"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "New components published"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Documentation updated"
-    <span>&#125;</span>
-  ]'
-  variant="soft"
-/&gt;</code></pre>
+            <pre><code>page MarqueeExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "All services operational"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "New components published"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Documentation updated"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Marquee
+      size="sm"
+      title="Compact Marquee"
+      description="A compact configuration for dashboards and dense product surfaces."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="soft"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -348,27 +363,32 @@ page MarqueeDetail {
           </div>
           <section class="demo-code" aria-label="Large visual marquee usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Marquee
-  size="lg"
-  color="info"
-  title="Built for complete digital platforms"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "label": "Public portals",
-      "icon": "icon-[lucide--landmark]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Enterprise systems",
-      "icon": "icon-[lucide--building-2]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Developer tools",
-      "icon": "icon-[lucide--code-2]"
-    <span>&#125;</span>
-  ]'
-  variant="raised"
-/&gt;</code></pre>
+            <pre><code>page MarqueeExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Public portals",
+    "icon": "icon-[lucide--landmark]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Enterprise systems",
+    "icon": "icon-[lucide--building-2]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Developer tools",
+    "icon": "icon-[lucide--code-2]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Marquee
+      size="lg"
+      color="info"
+      title="Built for complete digital platforms"
+      description="A richer configuration demonstrating additional content and hierarchy."
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      variant="raised"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

examples/component-showcase/app/pages/components/metric-card.wrn

@@ -26,7 +26,7 @@ page MetricCardDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
+  state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "none"
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -73,7 +73,7 @@ page MetricCardDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated
         </form>
       </div>
     </section>
@@ -199,7 +199,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
 if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
   console.log("action", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-card-demo-1">Operational KPI</a><a href="#metric-card-demo-2">Progress metric</a><a href="#metric-card-demo-3">Selectable dashboard metric</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
@@ -207,7 +207,7 @@ if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>
     </div>
     <nav class="detail-pagination">
       <span></span>
-      <a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a>
+      <span></span>
     </nav>
   }
 }

examples/component-showcase/app/pages/components/metric-grid.wrn

@@ -1,392 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page MetricGridDetail {
-  layout = "showcase"
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Public services\",\"value\":\"24\",\"description\":\"Citizen-facing services available online.\",\"icon\":\"icon-[lucide--hand-heart]\",\"trend\":\"+4\",\"trendLabel\":\"this release\",\"trendDirection\":\"up\",\"color\":\"primary\"},{\"label\":\"Police stations\",\"value\":\"126\",\"description\":\"Searchable station and jurisdiction entries.\",\"icon\":\"icon-[lucide--landmark]\",\"trend\":\"Updated\",\"trendLabel\":\"today\",\"color\":\"info\"},{\"label\":\"Availability\",\"value\":\"99.9\",\"suffix\":\"%\",\"description\":\"Target service availability.\",\"icon\":\"icon-[lucide--activity]\",\"trend\":\"Stable\",\"trendLabel\":\"30 days\",\"trendDirection\":\"positive\",\"color\":\"success\"}]")
-  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
-  state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
-  state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
-  state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
-  state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
-  state playground_dividers = (ctx.url.searchParams.get("pg_dividers") ?? "false") === "true"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
-  state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Metric Grid"
-    description = "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/data">Data</a><span aria-hidden="true">/</span><span>Metric Grid</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Data component</span>
-        <h1>Metric Grid</h1>
-        <p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p>
-        <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MetricGrid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,action">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Metric Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><MetricGrid items='{playground_items}' columns='{playground_columns}' tabletColumns='{playground_tabletColumns}' mobileColumns='{playground_mobileColumns}' gap='{playground_gap}' equalHeight='{playground_equalHeight}' dividers='{playground_dividers}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' maxWidth='{playground_maxWidth}' minItemWidth='{playground_minItemWidth}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;MetricGrid
-  items='[
-    <span>&#123;</span>
-      "id": "metric-grid-0-1",
-      "key": "metric-grid-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "metric-grid-0-2",
-      "key": "metric-grid-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-metric-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "label": "Public services",
-    "value": "24",
-    "description": "Citizen-facing services available online.",
-    "icon": "icon-[lucide--hand-heart]",
-    "trend": "+4",
-    "trendLabel": "this release",
-    "trendDirection": "up",
-    "color": "primary"
-  &#125;,
-  &#123;
-    "label": "Police stations",
-    "value": "126",
-    "description": "Searchable station and jurisdiction entries.",
-    "icon": "icon-[lucide--landmark]",
-    "trend": "Updated",
-    "trendLabel": "today",
-    "color": "info"
-  &#125;,
-  &#123;
-    "label": "Availability",
-    "value": "99.9",
-    "suffix": "%",
-    "description": "Target service availability.",
-    "icon": "icon-[lucide--activity]",
-    "trend": "Stable",
-    "trendLabel": "30 days",
-    "trendDirection": "positive",
-    "color": "success"
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-metric-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-metric-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-metric-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-metric-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-metric-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-metric-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-metric-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-metric-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-grid-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-metric-grid-dividers" name="pg_dividers" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-metric-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-metric-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-metric-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-metric-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-metric-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-metric-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-field" for="playground-metric-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Three-column KPI grid</h2><p>Display operational values in a full-width, responsive grid.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="metric-grid-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Three-column KPI grid usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;MetricGrid
-  items='[
-    <span>&#123;</span>
-      "label": "Public services",
-      "value": "24",
-      "description": "Citizen-facing services available online.",
-      "icon": "icon-[lucide--hand-heart]",
-      "trend": "+4",
-      "trendLabel": "this release",
-      "trendDirection": "up",
-      "color": "primary"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Police stations",
-      "value": "126",
-      "description": "Searchable station and jurisdiction entries.",
-      "icon": "icon-[lucide--landmark]",
-      "trend": "Updated",
-      "trendLabel": "today",
-      "color": "info"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Availability",
-      "value": "99.9",
-      "suffix": "%",
-      "description": "Target service availability.",
-      "icon": "icon-[lucide--activity]",
-      "trend": "Stable",
-      "trendLabel": "30 days",
-      "trendDirection": "positive",
-      "color": "success"
-    <span>&#125;</span>
-  ]'
-  columns="3"
-  gap="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Unified metrics bar</h2><p>Use dividers to present compact metrics as one cohesive surface.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="metric-grid-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="none" equalHeight="true" dividers="true" size="sm" variant="secondary" maxWidth="wide" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Unified metrics bar usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;MetricGrid
-  items='[
-    <span>&#123;</span>
-      "label": "Public services",
-      "value": "24",
-      "description": "Citizen-facing services available online.",
-      "icon": "icon-[lucide--hand-heart]",
-      "trend": "+4",
-      "trendLabel": "this release",
-      "trendDirection": "up",
-      "color": "primary"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Police stations",
-      "value": "126",
-      "description": "Searchable station and jurisdiction entries.",
-      "icon": "icon-[lucide--landmark]",
-      "trend": "Updated",
-      "trendLabel": "today",
-      "color": "info"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Availability",
-      "value": "99.9",
-      "suffix": "%",
-      "description": "Target service availability.",
-      "icon": "icon-[lucide--activity]",
-      "trend": "Stable",
-      "trendLabel": "30 days",
-      "trendDirection": "positive",
-      "color": "success"
-    <span>&#125;</span>
-  ]'
-  columns="3"
-  gap="none"
-  dividers="true"
-  size="sm"
-  variant="secondary"
-  maxWidth="wide"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Auto-fit monitoring grid</h2><p>Allow cards to wrap automatically when the number of metrics changes.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="metric-grid-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"},{"label":"Response time","value":"1.8","suffix":"s","description":"Median API response","icon":"icon-[lucide--timer]","color":"warning","progress":72,"progressLabel":"Target"}]' columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="lg" variant="soft" maxWidth="full" minItemWidth="17rem" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Auto-fit monitoring grid usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;MetricGrid
-  items='[
-    <span>&#123;</span>
-      "label": "Public services",
-      "value": "24",
-      "description": "Citizen-facing services available online.",
-      "icon": "icon-[lucide--hand-heart]",
-      "trend": "+4",
-      "trendLabel": "this release",
-      "trendDirection": "up",
-      "color": "primary"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Police stations",
-      "value": "126",
-      "description": "Searchable station and jurisdiction entries.",
-      "icon": "icon-[lucide--landmark]",
-      "trend": "Updated",
-      "trendLabel": "today",
-      "color": "info"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Availability",
-      "value": "99.9",
-      "suffix": "%",
-      "description": "Target service availability.",
-      "icon": "icon-[lucide--activity]",
-      "trend": "Stable",
-      "trendLabel": "30 days",
-      "trendDirection": "positive",
-      "color": "success"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Response time",
-      "value": "1.8",
-      "suffix": "s",
-      "description": "Median API response",
-      "icon": "icon-[lucide--timer]",
-      "color": "warning",
-      "progress": 72,
-      "progressLabel": "Target"
-    <span>&#125;</span>
-  ]'
-  size="lg"
-  variant="soft"
-  minItemWidth="17rem"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;MetricGrid
-  @select='console.log(payload)'
-  @action='console.log(payload)'
-/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
-
-const component = document.querySelector("[data-ui-component=\"MetricGrid\"], [data-component=\"MetricGrid\"]")
-
-if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
-  console.log("select", payload)
-<span>&#125;</span>)
-
-if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
-  console.log("action", payload)
-<span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>dividers</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-grid-demo-1">Three-column KPI grid</a><a href="#metric-grid-demo-2">Unified metrics bar</a><a href="#metric-grid-demo-3">Auto-fit monitoring grid</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/metric-card"><small>Previous</small><strong>← Metric Card</strong></a>
-      <a href="/components/stats-bar"><small>Next</small><strong>Stats Bar →</strong></a>
-    </nav>
-  }
-}

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

@@ -11,6 +11,7 @@ page ModalDetail {
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "center"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_showHeader = (ctx.url.searchParams.get("pg_showHeader") ?? "true") === "true"
   state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true"
   state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Modal"
   state playground_closeOnBackdrop = (ctx.url.searchParams.get("pg_closeOnBackdrop") ?? "true") === "true"
@@ -43,7 +44,7 @@ page ModalDetail {
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Modal</h1>
         <p>Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.</p>
-        <div class="detail-badges"><span>29 props</span><span>4 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>30 props</span><span>4 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -52,7 +53,7 @@ page ModalDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Modal open='{playground_open}' defaultOpen='{playground_defaultOpen}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' label='{playground_label}' size='{playground_size}' placement='{playground_placement}' color='{playground_color}' variant='{playground_variant}' showClose='{playground_showClose}' closeLabel='{playground_closeLabel}' closeOnBackdrop='{playground_closeOnBackdrop}' closeOnEscape='{playground_closeOnEscape}' closeOnCancel='{playground_closeOnCancel}' closeOnConfirm='{playground_closeOnConfirm}' showFooter='{playground_showFooter}' cancelLabel='{playground_cancelLabel}' cancelIcon='{playground_cancelIcon}' confirmLabel='{playground_confirmLabel}' confirmIcon='{playground_confirmIcon}' confirmDisabled='{playground_confirmDisabled}' confirmLoading='{playground_confirmLoading}' destructive='{playground_destructive}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' scrollable='{playground_scrollable}' scrollBehavior='{playground_scrollBehavior}' class='{playground_class}'><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
+          <div class="playground-preview-source" data-playground-preview><Modal open='{playground_open}' defaultOpen='{playground_defaultOpen}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' label='{playground_label}' size='{playground_size}' placement='{playground_placement}' color='{playground_color}' variant='{playground_variant}' showHeader='{playground_showHeader}' showClose='{playground_showClose}' closeLabel='{playground_closeLabel}' closeOnBackdrop='{playground_closeOnBackdrop}' closeOnEscape='{playground_closeOnEscape}' closeOnCancel='{playground_closeOnCancel}' closeOnConfirm='{playground_closeOnConfirm}' showFooter='{playground_showFooter}' cancelLabel='{playground_cancelLabel}' cancelIcon='{playground_cancelIcon}' confirmLabel='{playground_confirmLabel}' confirmIcon='{playground_confirmIcon}' confirmDisabled='{playground_confirmDisabled}' confirmLoading='{playground_confirmLoading}' destructive='{playground_destructive}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' scrollable='{playground_scrollable}' scrollBehavior='{playground_scrollBehavior}' class='{playground_class}'><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Modal
@@ -78,8 +79,8 @@ page ModalDetail {
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>29 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-modal-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal playground" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-field" for="playground-modal-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-modal-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-modal-label"><span><strong>label</strong><small>string</small></span><input id="playground-modal-label" name="pg_label" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="xs">xs</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-modal-placement" name="pg_placement"><option value="center" selected>center</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-modal-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="outline">outline</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-modal-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-modal-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-toggle" for="playground-modal-closeOnBackdrop"><span><strong>close On Backdrop</strong><small>boolean</small></span><input id="playground-modal-closeOnBackdrop" name="pg_closeOnBackdrop" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-modal-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnCancel"><span><strong>close On Cancel</strong><small>boolean</small></span><input id="playground-modal-closeOnCancel" name="pg_closeOnCancel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label claLine truncated
+          <header><div><span>Component props</span><strong>30 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-modal-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal playground" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-field" for="playground-modal-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-modal-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-modal-label"><span><strong>label</strong><small>string</small></span><input id="playground-modal-label" name="pg_label" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="xs">xs</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-modal-placement" name="pg_placement"><option value="center" selected>center</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-modal-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="outline">outline</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-modal-showHeader"><span><strong>show Header</strong><small>boolean</small></span><input id="playground-modal-showHeader" name="pg_showHeader" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-modal-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-toggle" for="playground-modal-closeOnBackdrop"><span><strong>close On Backdrop</strong><small>boolean</small></span><input id="playground-modal-closeOnBackdrop" name="pg_closeOnBackdrop" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-modal-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated
         </form>
       </div>
     </section>
@@ -95,7 +96,7 @@ page ModalDetail {
           <div id="modal-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
-            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Confirm service request" description="Review the information before continuing." icon="icon-[lucide--shield-check]" label="Modal" size="md" variant="default" showClose="true" closeLabel="Modal" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Go back" confirmLabel="Confirm request" confirmIcon="icon-[lucide--check]" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open modal" triggerIcon="icon-[lucide--square-stack]" scrollable="true" class="showcase-instance showcase-instance--1"><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Confirm service request" description="Review the information before continuing." icon="icon-[lucide--shield-check]" label="Modal" size="md" variant="default" showHeader="true" showClose="true" closeLabel="Modal" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Go back" confirmLabel="Confirm request" confirmIcon="icon-[lucide--check]" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open modal" triggerIcon="icon-[lucide--square-stack]" scrollable="true" class="showcase-instance showcase-instance--1"><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
           </div>
           <section class="demo-code" aria-label="Confirmation modal usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -133,7 +134,7 @@ page ModalDetail {
           <div id="modal-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
-            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Delete this record?" description="This action cannot be undone." icon="icon-[lucide--arrow-right]" label="Compact example" size="sm" variant="outline" showClose="true" closeLabel="Compact example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Keep record" confirmLabel="Delete record" confirmDisabled="false" confirmLoading="false" destructive="true" triggerLabel="Delete record" scrollable="true" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Delete this record?" description="This action cannot be undone." icon="icon-[lucide--arrow-right]" label="Compact example" size="sm" variant="outline" showHeader="true" showClose="true" closeLabel="Compact example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Keep record" confirmLabel="Delete record" confirmDisabled="false" confirmLoading="false" destructive="true" triggerLabel="Delete record" scrollable="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Destructive confirmation usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -171,7 +172,7 @@ page ModalDetail {
           <div id="modal-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
-            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Create service request" description="Complete the required information." icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="soft" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Advanced example" confirmLabel="Submit request" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open request form" triggerIcon="icon-[lucide--file-plus-2]" scrollable="true" class="showcase-instance showcase-instance--3"><div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div></Modal></div>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Create service request" description="Complete the required information." icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="soft" showHeader="true" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Advanced example" confirmLabel="Submit request" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open request form" triggerIcon="icon-[lucide--file-plus-2]" scrollable="true" class="showcase-instance showcase-instance--3"><div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div></Modal></div>
           </div>
           <section class="demo-code" aria-label="Scrollable form modal usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -197,6 +198,77 @@ page ModalDetail {
   &lt;div data-slot="footer"&gt;
     &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
   &lt;/div&gt;
+&lt;/Modal&gt;</code></pre>
+          </section>
+        </div>
+      </article>
+      <article class="demo-case">
+        <header class="demo-case-header">
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Custom header and footer</h2><p>Supply your own header, body, and footer actions.</p></div>
+          <span class="demo-case-number">04</span>
+        </header>
+        <div class="demo-workbench">
+          <div id="modal-demo-4" class="demo-canvas demo-canvas--4">
+            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="" description="" icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="success" showHeader="true" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="" confirmLabel="" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open custom dialog" scrollable="true" class="showcase-instance showcase-instance--4"><div data-slot="header"><h2>Invite a teammate</h2></div><p>Give your teammate access to your workspace.</p><div data-slot="footer"><button type="button" class="showcase-action" data-modal-close="true">Done</button></div></Modal></div>
+          </div>
+          <section class="demo-code" aria-label="Custom header and footer usage">
+            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+            <pre><code>&lt;Modal
+  icon="icon-[lucide--trash-2]"
+  label="Advanced example"
+  size="lg"
+  variant="success"
+  closeLabel="Advanced example"
+  triggerLabel="Open custom dialog"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;h2&gt;Invite a teammate&lt;/h2&gt;
+  &lt;/div&gt;
+  &lt;p&gt;Give your teammate access to your workspace.&lt;/p&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;button type="button" class="showcase-action" data-modal-close="true"&gt;Done&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/Modal&gt;</code></pre>
+          </section>
+        </div>
+      </article>
+      <article class="demo-case">
+        <header class="demo-case-header">
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered content</h2><p>Omit the standard header and footer for a fully custom composition.</p></div>
+          <span class="demo-case-number">05</span>
+        </header>
+        <div class="demo-workbench">
+          <div id="modal-demo-5" class="demo-canvas demo-canvas--5">
+            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="" description="" icon="" label="Advanced example" size="sm" variant="success" showHeader="false" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="false" cancelLabel="Advanced example" confirmLabel="Advanced example" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open centered dialog" scrollable="true" class="showcase-instance showcase-instance--5"><div style="text-align:center;padding:2rem"><h2>You are all set</h2><p>Your preferences have been saved.</p><button type="button" class="showcase-action" data-modal-close="true">Continue</button></div></Modal></div>
+          </div>
+          <section class="demo-code" aria-label="Centered content usage">
+            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+            <pre><code>&lt;Modal
+  label="Advanced example"
+  size="sm"
+  variant="success"
+  showHeader="false"
+  closeLabel="Advanced example"
+  showFooter="false"
+  cancelLabel="Advanced example"
+  confirmLabel="Advanced example"
+  triggerLabel="Open centered dialog"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div style="text-align:center;padding:2rem"&gt;&lt;h2&gt;You are all set&lt;/h2&gt;&lt;p&gt;Your preferences have been saved.&lt;/p&gt;&lt;button type="button" class="showcase-action" data-modal-close="true"&gt;Continue&lt;/button&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Modal&gt;</code></pre>
           </section>
         </div>
@@ -225,10 +297,10 @@ if (component) registerOutputHandler(component, "cancel", (payload) =&gt; <span>
 if (component) registerOutputHandler(component, "confirm", (payload) =&gt; <span>&#123;</span>
   console.log("confirm", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Modal dialog"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close modal"</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnCancel</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnConfirm</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showFooter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel"</code></td><td>No</td></tr><tr><td><code>cancelIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmLabel</code></td><td>string</td><td><code>"Confirm"</code></td><td>No</td></tr><tr><td><code>confirmIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>confirmLoading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>destructive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollBehavior</code></td><td>string</td><td><code>"inside"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Modal dialog"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>showHeader</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close modal"</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnCancel</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnConfirm</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showFooter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel"</code></td><td>No</td></tr><tr><td><code>cancelIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmLabel</code></td><td>string</td><td><code>"Confirm"</code></td><td>No</td></tr><tr><td><code>confirmIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>confirmLoading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>destructive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollBehavior</code></td><td>string</td><td><code>"inside"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Confirmation modal</a><a href="#modal-demo-2">Destructive confirmation</a><a href="#modal-demo-3">Scrollable form modal</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Confirmation modal</a><a href="#modal-demo-2">Destructive confirmation</a><a href="#modal-demo-3">Scrollable form modal</a><a href="#modal-demo-4">Custom header and footer</a><a href="#modal-demo-5">Centered content</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -35,118 +35,123 @@ page NavDetail {
           <div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Nav
-  items='[
-    <span>&#123;</span>
-      "id": "nav-0-1",
-      "key": "nav-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#nav-demo",
-      "actionHref": "#nav-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "nav-0-2",
-      "key": "nav-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#nav-demo",
-      "actionHref": "#nav-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  label="Nav"
-  toggleLabel="Nav"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "nav-0-1",
+    "key": "nav-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#nav-demo",
+    "actionHref": "#nav-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "nav-0-2",
+    "key": "nav-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#nav-demo",
+    "actionHref": "#nav-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="Nav"
+      toggleLabel="Nav"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -280,36 +285,41 @@ page NavDetail {
           </div>
           <section class="demo-code" aria-label="Horizontal links usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Nav
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "value": "home",
-      "icon": "icon-[lucide--house]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Inbox",
-      "href": "/inbox",
-      "value": "inbox",
-      "badge": "9"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Reports",
-      "href": "/reports",
-      "value": "reports"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Archive",
-      "href": "/archive",
-      "value": "archive",
-      "disabled": true
-    <span>&#125;</span>
-  ]'
-  active="inbox"
-  label="Nav"
-  toggleLabel="Nav"
-/&gt;</code></pre>
+            <pre><code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "value": "home",
+    "icon": "icon-[lucide--house]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Inbox",
+    "href": "/inbox",
+    "value": "inbox",
+    "badge": "9"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Reports",
+    "href": "/reports",
+    "value": "reports"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Archive",
+    "href": "/archive",
+    "value": "archive",
+    "disabled": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="inbox"
+      label="Nav"
+      toggleLabel="Nav"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -326,46 +336,51 @@ page NavDetail {
           </div>
           <section class="demo-code" aria-label="Nested submenus usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Nav
-  size="sm"
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "value": "home"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Products",
-      "value": "products",
-      "items": [
-        <span>&#123;</span>
-          "label": "Overview",
-          "href": "/p",
-          "value": "p-overview"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Platform",
-          "value": "p-platform",
-          "items": [
-            <span>&#123;</span>
-              "label": "Runtime",
-              "href": "/p/runtime",
-              "value": "runtime"
-            <span>&#125;</span>,
-            <span>&#123;</span>
-              "label": "Compiler",
-              "href": "/p/compiler",
-              "value": "compiler"
-            <span>&#125;</span>
-          ]
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>
-  ]'
-  active="p-overview"
-  label="Compact example"
-  toggleLabel="Compact example"
-/&gt;</code></pre>
+            <pre><code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "value": "home"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Products",
+    "value": "products",
+    "items": [
+      <span>&#123;</span>
+        "label": "Overview",
+        "href": "/p",
+        "value": "p-overview"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Platform",
+        "value": "p-platform",
+        "items": [
+          <span>&#123;</span>
+            "label": "Runtime",
+            "href": "/p/runtime",
+            "value": "runtime"
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "Compiler",
+            "href": "/p/compiler",
+            "value": "compiler"
+          <span>&#125;</span>
+        ]
+      <span>&#125;</span>
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      size="sm"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="p-overview"
+      label="Compact example"
+      toggleLabel="Compact example"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -382,34 +397,39 @@ page NavDetail {
           </div>
           <section class="demo-code" aria-label="Vertical rail usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Nav
-  size="lg"
-  items='[
-    <span>&#123;</span>
-      "label": "Dashboard",
-      "href": "/",
-      "value": "dash",
-      "icon": "icon-[lucide--gauge]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Team",
-      "href": "/team",
-      "value": "team",
-      "icon": "icon-[lucide--users]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Settings",
-      "href": "/settings",
-      "value": "settings",
-      "icon": "icon-[lucide--settings]"
-    <span>&#125;</span>
-  ]'
-  active="team"
-  orientation="vertical"
-  label="Advanced example"
-  collapsible="false"
-  toggleLabel="Advanced example"
-/&gt;</code></pre>
+            <pre><code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Dashboard",
+    "href": "/",
+    "value": "dash",
+    "icon": "icon-[lucide--gauge]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Team",
+    "href": "/team",
+    "value": "team",
+    "icon": "icon-[lucide--users]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Settings",
+    "href": "/settings",
+    "value": "settings",
+    "icon": "icon-[lucide--settings]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      size="lg"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="team"
+      orientation="vertical"
+      label="Advanced example"
+      collapsible="false"
+      toggleLabel="Advanced example"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

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

@@ -10,9 +10,18 @@ page NavbarDetail {
   state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
   state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
+  state playground_floating = (ctx.url.searchParams.get("pg_floating") ?? "false") === "true"
+  state playground_startFloating = ctx.url.searchParams.get("pg_startFloating") ?? "0px"
   state playground_openOnHover = (ctx.url.searchParams.get("pg_openOnHover") ?? "false") === "true"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
   state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar"
+  state playground_collapseAt = ctx.url.searchParams.get("pg_collapseAt") ?? "900px"
+  state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "content"
+  state playground_mobileUtilitiesPosition = ctx.url.searchParams.get("pg_mobileUtilitiesPosition") ?? "header"
+  state playground_gutter = ctx.url.searchParams.get("pg_gutter") ?? "md"
+  state playground_contentGutter = ctx.url.searchParams.get("pg_contentGutter") ?? "md"
+  state playground_flushMobile = (ctx.url.searchParams.get("pg_flushMobile") ?? "false") === "true"
+  state playground_translationPrefix = ctx.url.searchParams.get("pg_translationPrefix") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   state demo_obj_0 = JSON.parse("{\"label\":\"Northwind\",\"description\":\"Console\",\"href\":\"/\"}")
   state demo_obj_1 = JSON.parse("{\"label\":\"Northwind\",\"icon\":\"icon-[lucide--box]\",\"href\":\"/\"}")
@@ -30,7 +39,7 @@ page NavbarDetail {
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Navbar</h1>
         <p>Theme-aware, responsive navbar component.</p>
-        <div class="detail-badges"><span>13 props</span><span>2 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>22 props</span><span>4 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -39,13 +48,12 @@ page NavbarDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' floating='{playground_floating}' startFloating='{playground_startFloating}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' collapseAt='{playground_collapseAt}' mobilePanel='{playground_mobilePanel}' mobileUtilitiesPosition='{playground_mobileUtilitiesPosition}' gutter='{playground_gutter}' contentGutter='{playground_contentGutter}' flushMobile='{playground_flushMobile}' translationPrefix='{playground_translationPrefix}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Navbar
-  label="Navbar"
-  topbarLabel="Navbar"
-  brand='<span>&#123;</span>
+            <pre><code data-playground-code>page NavbarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
     "id": "navbar-0-1",
     "key": "navbar-0-1",
     "value": "primary",
@@ -97,237 +105,250 @@ page NavbarDetail {
       "Included",
       "Standard"
     ]
-  <span>&#125;</span>'
-  items='[
-    <span>&#123;</span>
-      "id": "navbar-0-1",
-      "key": "navbar-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "navbar-0-2",
-      "key": "navbar-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  actions='[
-    <span>&#123;</span>
-      "id": "navbar-0-1",
-      "key": "navbar-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "navbar-0-2",
-      "key": "navbar-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  mobileLabel="Navbar"&gt;
-  &lt;div data-slot="topbar"&gt;
-    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Navbar&gt;</code></pre>
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "navbar-0-2",
+    "key": "navbar-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#navbar-demo",
+    "actionHref": "#navbar-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  state actions = [
+  <span>&#123;</span>
+    "id": "navbar-0-1",
+    "key": "navbar-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#navbar-demo",
+    "actionHref": "#navbar-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "navbar-0-2",
+    "key": "navbar-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#navbar-demo",
+    "actionHref": "#navbar-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Navbar
+      label="Navbar"
+      topbarLabel="Navbar"
+      brand='<span>&#123;</span>
+        "id": "navbar-0-1",
+        "key": "navbar-0-1",
+        "value": "primary",
+        "label": "Primary workflow",
+        "title": "Primary workflow",
+        "description": "A clean default configuration for everyday product interfaces.",
+        "text": "A configurable sample message.",
+        "href": "#navbar-demo",
+        "actionHref": "#navbar-demo",
+        "actionLabel": "View details",
+        "icon": "icon-[lucide--sparkles]",
+        "iconClass": "icon-[lucide--sparkles]",
+        "variant": "primary",
+        "status": "Active",
+        "time": "09:30",
+        "current": true,
+        "selected": true,
+        "checked": true,
+        "disabled": false,
+        "outgoing": false,
+        "open": true,
+        "number": 1,
+        "count": 16,
+        "percentage": 72,
+        "color": "#7c3aed",
+        "target": "_self",
+        "ariaLabel": "Open primary workflow 1",
+        "items": [
+          <span>&#123;</span>
+            "label": "Nested option A",
+            "value": "nested-a"
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "Nested option B",
+            "value": "nested-b"
+          <span>&#125;</span>
+        ],
+        "links": [
+          <span>&#123;</span>
+            "label": "Documentation",
+            "href": "#documentation"
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "API reference",
+            "href": "#api-reference"
+          <span>&#125;</span>
+        ],
+        "values": [
+          "Included",
+          "Standard"
+        ]
+      <span>&#125;</span>'
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      actions="<span>&#123;</span>actions<span>&#125;</span>"
+      mobileLabel="Navbar"&gt;
+      &lt;div data-slot="topbar"&gt;
+        &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="brand"&gt;
+        &lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="actions"&gt;
+        &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="utilities"&gt;
+        &lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Navbar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-topbarLabel"><span><strong>topbar Label</strong><small>string</small></span><input id="playground-navbar-topbarLabel" name="pg_topbarLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-brand"><span><strong>brand</strong><small>Record&lt;string, unknown&gt;</small></span><textarea id="playground-navbar-brand" name="pg_brand" rows="5" spellcheck="false" data-playground-json>&#123;
   "id": "navbar-0-1",
   "key": "navbar-0-1",
@@ -594,7 +615,7 @@ page NavbarDetail {
       "Standard"
     ]
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-floating"><span><strong>floating</strong><small>boolean</small></span><input id="playground-navbar-floating" name="pg_floating" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-startFloating"><span><strong>start Floating</strong><small>string</small></span><input id="playground-navbar-startFloating" name="pg_startFloating" type="text" value="0px" /></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-collapseAt"><span><strong>collapse At</strong><small>string</small></span><input id="playground-navbar-collapseAt" name="pg_collapseAt" type="text" value="900px" /></label><label class="playground-field" for="playground-navbar-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-navbar-mobilePanel" name="pg_mobilePanel" type="text" value="content" /></label><label class="playground-field" for="playground-navbar-mobileUtilitiesPosition"><span><strong>mobile Utilities Position</strong><small>string</small></span><input id="playground-navbar-mobileUtilitiesPosition" name="pg_mobileUtilitiesPosition" type="text" value="header" /></label><label class="playground-field" for="playground-navbar-gutter"><span><strong>gutter</strong><small>string</small></span><input id="playground-navbar-gutter" name="pg_gutter" type="text" value="md" /></label><label class="playground-field" for="playground-navbar-contentGutter"><span><strong>content Gutter</strong><small>string</small></span><input id="playground-navbar-contentGutter" name="pg_contentGutter" type="text" value="md" /></label><label class="playground-toggle" for="playground-navbar-flushMobile"><span><strong>flush Mobile</strong><small>boolean</small></span><input id="playground-navbar-flushMobile" name="pg_flushMobile" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-translationPrefix"><span><strong>translation Prefix</strong><small>string</small></span><input id="playground-navbar-translationPrefix" name="pg_translationPrefix" type="text" value="" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -610,55 +631,67 @@ page NavbarDetail {
           <div id="navbar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" floating="false" openOnHover="false" mobileLabel="Navbar" flushMobile="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Brand, links and actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Navbar
-  topbarLabel="Navbar"
-  brand='<span>&#123;</span>
-    "label": "Northwind",
-    "description": "Console",
-    "href": "/"
-  <span>&#125;</span>'
-  items='[
-    <span>&#123;</span>
-      "label": "Overview",
-      "href": "/",
-      "value": "overview"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Projects",
-      "href": "/projects",
-      "value": "projects"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Reports",
-      "href": "/reports",
-      "value": "reports"
-    <span>&#125;</span>
-  ]'
-  actions='[
-    <span>&#123;</span>
-      "label": "Sign in",
-      "href": "/login",
-      "variant": "link"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Start free",
-      "href": "/signup",
-      "variant": "primary"
-    <span>&#125;</span>
-  ]'
-  active="projects"
-  mobileLabel="Navbar"&gt;
-  &lt;div data-slot="topbar"&gt;
-    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Navbar&gt;</code></pre>
+            <pre><code>page NavbarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Overview",
+    "href": "/",
+    "value": "overview"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Projects",
+    "href": "/projects",
+    "value": "projects"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Reports",
+    "href": "/reports",
+    "value": "reports"
+  <span>&#125;</span>
+]
+  state actions = [
+  <span>&#123;</span>
+    "label": "Sign in",
+    "href": "/login",
+    "variant": "link"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Start free",
+    "href": "/signup",
+    "variant": "primary"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Navbar
+      topbarLabel="Navbar"
+      brand='<span>&#123;</span>
+        "label": "Northwind",
+        "description": "Console",
+        "href": "/"
+      <span>&#125;</span>'
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      actions="<span>&#123;</span>actions<span>&#125;</span>"
+      active="projects"
+      mobileLabel="Navbar"&gt;
+      &lt;div data-slot="topbar"&gt;
+        &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="brand"&gt;
+        &lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="actions"&gt;
+        &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="utilities"&gt;
+        &lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Navbar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -671,87 +704,99 @@ page NavbarDetail {
           <div id="navbar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" floating="false" openOnHover="false" mobileLabel="Compact example" flushMobile="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Dropdown and mega panel usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Navbar
-  size="sm"
-  label="Compact example"
-  topbarLabel="Compact example"
-  brand='<span>&#123;</span>
-    "label": "Northwind",
-    "icon": "icon-[lucide--box]",
-    "href": "/"
-  <span>&#125;</span>'
-  items='[
-    <span>&#123;</span>
-      "label": "Overview",
-      "href": "/",
-      "value": "overview"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Products",
-      "value": "products",
-      "columns": 2,
-      "description": "Everything in the platform.",
-      "children": [
-        <span>&#123;</span>
-          "label": "Platform",
-          "children": [
-            <span>&#123;</span>
-              "label": "Runtime",
-              "href": "/runtime",
-              "description": "The browser half.",
-              "icon": "icon-[lucide--cpu]"
-            <span>&#125;</span>,
-            <span>&#123;</span>
-              "label": "Compiler",
-              "href": "/compiler",
-              "description": "WRN to JavaScript.",
-              "icon": "icon-[lucide--hammer]"
-            <span>&#125;</span>
-          ]
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Tooling",
-          "children": [
-            <span>&#123;</span>
-              "label": "CLI",
-              "href": "/cli",
-              "description": "Scaffold and deploy."
-            <span>&#125;</span>,
-            <span>&#123;</span>
-              "label": "Editor",
-              "href": "/editor",
-              "description": "Language server."
-            <span>&#125;</span>
-          ]
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Pricing",
-      "href": "/pricing",
-      "value": "pricing"
-    <span>&#125;</span>
-  ]'
-  actions='[
-    <span>&#123;</span>
-      "label": "Book a demo",
-      "href": "/demo",
-      "variant": "primary"
-    <span>&#125;</span>
-  ]'
-  active="overview"
-  mobileLabel="Compact example"&gt;
-  &lt;div data-slot="topbar"&gt;
-    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Navbar&gt;</code></pre>
+            <pre><code>page NavbarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Overview",
+    "href": "/",
+    "value": "overview"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Products",
+    "value": "products",
+    "columns": 2,
+    "description": "Everything in the platform.",
+    "children": [
+      <span>&#123;</span>
+        "label": "Platform",
+        "children": [
+          <span>&#123;</span>
+            "label": "Runtime",
+            "href": "/runtime",
+            "description": "The browser half.",
+            "icon": "icon-[lucide--cpu]"
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "Compiler",
+            "href": "/compiler",
+            "description": "WRN to JavaScript.",
+            "icon": "icon-[lucide--hammer]"
+          <span>&#125;</span>
+        ]
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Tooling",
+        "children": [
+          <span>&#123;</span>
+            "label": "CLI",
+            "href": "/cli",
+            "description": "Scaffold and deploy."
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "Editor",
+            "href": "/editor",
+            "description": "Language server."
+          <span>&#125;</span>
+        ]
+      <span>&#125;</span>
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Pricing",
+    "href": "/pricing",
+    "value": "pricing"
+  <span>&#125;</span>
+]
+  state actions = [
+  <span>&#123;</span>
+    "label": "Book a demo",
+    "href": "/demo",
+    "variant": "primary"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Navbar
+      size="sm"
+      label="Compact example"
+      topbarLabel="Compact example"
+      brand='<span>&#123;</span>
+        "label": "Northwind",
+        "icon": "icon-[lucide--box]",
+        "href": "/"
+      <span>&#125;</span>'
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      actions="<span>&#123;</span>actions<span>&#125;</span>"
+      active="overview"
+      mobileLabel="Compact example"&gt;
+      &lt;div data-slot="topbar"&gt;
+        &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="brand"&gt;
+        &lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="actions"&gt;
+        &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="utilities"&gt;
+        &lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Navbar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -764,46 +809,58 @@ page NavbarDetail {
           <div id="navbar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" openOnHover="false" mobileLabel="Toggle navigation" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" floating="false" openOnHover="false" mobileLabel="Toggle navigation" flushMobile="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Sticky and compact usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Navbar
-  size="sm"
-  label="Advanced example"
-  topbarLabel="Advanced example"
-  brand='<span>&#123;</span>
-    "label": "Acme",
-    "href": "/"
-  <span>&#125;</span>'
-  items='[
-    <span>&#123;</span>
-      "label": "Docs",
-      "href": "/docs",
-      "value": "docs"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Support",
-      "href": "/support",
-      "value": "support"
-    <span>&#125;</span>
-  ]'
-  actions='[
-    <span>&#123;</span>
-      "label": "Dashboard",
-      "href": "/app",
-      "variant": "primary"
-    <span>&#125;</span>
-  ]'
-  active="docs"
-  sticky="true"&gt;
-  &lt;div data-slot="topbar"&gt;
-    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Navbar&gt;</code></pre>
+            <pre><code>page NavbarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Docs",
+    "href": "/docs",
+    "value": "docs"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Support",
+    "href": "/support",
+    "value": "support"
+  <span>&#125;</span>
+]
+  state actions = [
+  <span>&#123;</span>
+    "label": "Dashboard",
+    "href": "/app",
+    "variant": "primary"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Navbar
+      size="sm"
+      label="Advanced example"
+      topbarLabel="Advanced example"
+      brand='<span>&#123;</span>
+        "label": "Acme",
+        "href": "/"
+      <span>&#125;</span>'
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      actions="<span>&#123;</span>actions<span>&#125;</span>"
+      active="docs"
+      sticky="true"&gt;
+      &lt;div data-slot="topbar"&gt;
+        &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="brand"&gt;
+        &lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="actions"&gt;
+        &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div data-slot="utilities"&gt;
+        &lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Navbar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -836,7 +893,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
 if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
   console.log("action", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>Record&lt;string, unknown&gt;</td><td><code><span>&#123;</span><span>&#125;</span></code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>Record&lt;string, unknown&gt;</td><td><code><span>&#123;</span><span>&#125;</span></code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>floating</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>startFloating</code></td><td>string</td><td><code>"0px"</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</code></td><td>No</td></tr><tr><td><code>collapseAt</code></td><td>string</td><td><code>"900px"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"content"</code></td><td>No</td></tr><tr><td><code>mobileUtilitiesPosition</code></td><td>string</td><td><code>"header"</code></td><td>No</td></tr><tr><td><code>gutter</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>contentGutter</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>flushMobile</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>translationPrefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#navbar-demo-1">Brand, links and actions</a><a href="#navbar-demo-2">Dropdown and mega panel</a><a href="#navbar-demo-3">Sticky and compact</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/page-header.wrn

@@ -1,564 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page PageHeaderDetail {
-  layout = "showcase"
-  state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Page Header example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default page header for a modern application."
-  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "page-title"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_centered = (ctx.url.searchParams.get("pg_centered") ?? "false") === "true"
-  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
-  state playground_showBreadcrumbs = (ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true") === "true"
-  state playground_breadcrumbs = JSON.parse(ctx.url.searchParams.get("pg_breadcrumbs") ?? "[{\"label\":\"Home\",\"href\":\"/\",\"icon\":\"icon-[lucide--house]\"},{\"label\":\"Components\",\"href\":\"/base\"},{\"label\":\"Page header\",\"current\":true}]")
-  state playground_breadcrumbParent = ctx.url.searchParams.get("pg_breadcrumbParent") ?? ""
-  state playground_breadcrumbParentHref = ctx.url.searchParams.get("pg_breadcrumbParentHref") ?? "#page-header-demo"
-  state playground_breadcrumbCurrent = ctx.url.searchParams.get("pg_breadcrumbCurrent") ?? ""
-  state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Page Header"
-  state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#page-header-demo"
-  state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
-  state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "Page Header"
-  state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#page-header-demo"
-  state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_borderBottom = (ctx.url.searchParams.get("pg_borderBottom") ?? "true") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Page Header"
-    description = "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Page Header</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Marketing component</span>
-        <h1>Page Header</h1>
-        <p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p>
-        <div class="detail-badges"><span>25 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PageHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Page Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><PageHeader eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' id='{playground_id}' align='{playground_align}' centered='{playground_centered}' compact='{playground_compact}' size='{playground_size}' maxWidth='{playground_maxWidth}' showBreadcrumbs='{playground_showBreadcrumbs}' breadcrumbs='{playground_breadcrumbs}' breadcrumbParent='{playground_breadcrumbParent}' breadcrumbParentHref='{playground_breadcrumbParentHref}' breadcrumbCurrent='{playground_breadcrumbCurrent}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' color='{playground_color}' variant='{playground_variant}' borderBottom='{playground_borderBottom}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;PageHeader
-  title="Page Header example"
-  description="A polished default page header for a modern application."
-  align="start"
-  showBreadcrumbs="true"
-  breadcrumbs='[
-    <span>&#123;</span>
-      "id": "page-header-0-1",
-      "key": "page-header-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "page-header-0-2",
-      "key": "page-header-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  breadcrumbParentHref="#page-header-demo"
-  primaryLabel="Page Header"
-  primaryHref="#page-header-demo"
-  secondaryLabel="Page Header"
-  secondaryHref="#page-header-demo"&gt;
-  &lt;div data-slot="meta"&gt;
-    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PageHeader&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-page-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-page-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-page-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-page-header-title" name="pg_title" type="text" value="Page Header example" /></label><label class="playground-field" for="playground-page-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-page-header-description" name="pg_description" type="text" value="A polished default page header for a modern application." /></label><label class="playground-field" for="playground-page-header-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-page-header-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-page-header-id" name="pg_id" type="text" value="page-title" /></label><label class="playground-field" for="playground-page-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-page-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-page-header-centered"><span><strong>centered</strong><small>boolean</small></span><input id="playground-page-header-centered" name="pg_centered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-page-header-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-page-header-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-page-header-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-page-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-page-header-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-page-header-showBreadcrumbs"><span><strong>show Breadcrumbs</strong><small>boolean</small></span><input id="playground-page-header-showBreadcrumbs" name="pg_showBreadcrumbs" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-breadcrumbs"><span><strong>breadcrumbs</strong><small>unknown[]</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "label": "Home",
-    "href": "/",
-    "icon": "icon-[lucide--house]"
-  &#125;,
-  &#123;
-    "label": "Components",
-    "href": "/base"
-  &#125;,
-  &#123;
-    "label": "Page header",
-    "current": true
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-page-header-breadcrumbParent"><span><strong>breadcrumb Parent</strong><small>string</small></span><input id="playground-page-header-breadcrumbParent" name="pg_breadcrumbParent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-breadcrumbParentHref"><span><strong>breadcrumb Parent Href</strong><small>string</small></span><input id="playground-page-header-breadcrumbParentHref" name="pg_breadcrumbParentHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-breadcrumbCurrent"><span><strong>breadcrumb Current</strong><small>string</small></span><input id="playground-page-header-breadcrumbCurrent" name="pg_breadcrumbCurrent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-page-header-primaryLabel" name="pg_primaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-page-header-primaryHref" name="pg_primaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-page-header-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-page-header-secondaryLabel" name="pg_secondaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-page-header-secondaryHref" name="pg_secondaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-page-header-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-page-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-page-header-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-page-header-variant" name="pg_variant"><option value="default" selected>default</option><option value="minimal">minimal</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-page-header-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-page-header-borderBottom" name="pg_borderBottom" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-page-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Page header with actions</h2><p>Introduce a service or documentation page with breadcrumbs and clear actions.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="page-header-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Page header with actions usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;PageHeader
-  eyebrow="Component showcase"
-  title="Page headers with clear hierarchy"
-  description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information."
-  icon="icon-[lucide--panel-top]"
-  align="start"
-  maxWidth="full"
-  showBreadcrumbs="true"
-  breadcrumbs='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "icon": "icon-[lucide--house]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Components",
-      "href": "/base"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Page header",
-      "current": true
-    <span>&#125;</span>
-  ]'
-  breadcrumbParentHref="#page-header-demo"
-  primaryLabel="Primary action"
-  primaryHref="#primary"
-  primaryIcon="icon-[lucide--arrow-down]"
-  secondaryLabel="Secondary action"
-  secondaryHref="#secondary"
-  secondaryIcon="icon-[lucide--house]"&gt;
-  &lt;div data-slot="meta"&gt;
-    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PageHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact service header</h2><p>Use reduced spacing when a page already sits inside an application shell.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="page-header-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><PageHeader eyebrow="Citizen service" title="Track a complaint" description="Check the latest status using your complaint reference." icon="icon-[lucide--scan-search]" align="center" centered="false" compact="true" size="sm" showBreadcrumbs="true" breadcrumbs='[{"id":"page-header-1-1","key":"page-header-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"page-header-1-2","key":"page-header-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Track status" primaryHref="#track" secondaryLabel="Compact example" secondaryHref="#page-header-demo" variant="soft" borderBottom="true" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact service header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;PageHeader
-  eyebrow="Citizen service"
-  title="Track a complaint"
-  description="Check the latest status using your complaint reference."
-  icon="icon-[lucide--scan-search]"
-  align="center"
-  compact="true"
-  size="sm"
-  showBreadcrumbs="true"
-  breadcrumbs='[
-    <span>&#123;</span>
-      "id": "page-header-1-1",
-      "key": "page-header-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "page-header-1-2",
-      "key": "page-header-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  breadcrumbParentHref="#page-header-demo"
-  primaryLabel="Track status"
-  primaryHref="#track"
-  secondaryLabel="Compact example"
-  secondaryHref="#page-header-demo"
-  variant="soft"&gt;
-  &lt;div data-slot="meta"&gt;
-    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PageHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Centered campaign header</h2><p>Use a centered header for campaigns, guides, and high-level public information.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="page-header-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><PageHeader eyebrow="Safety guide" title="Prepare your family for emergencies" description="Practical guidance for creating a plan, preparing supplies, and staying informed." icon="icon-[lucide--trash-2]" align="center" centered="true" compact="false" size="lg" maxWidth="wide" showBreadcrumbs="true" breadcrumbs='[{"id":"page-header-2-1","key":"page-header-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"page-header-2-2","key":"page-header-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Advanced example" primaryHref="#page-header-demo" secondaryLabel="Advanced example" secondaryHref="#page-header-demo" variant="minimal" borderBottom="true" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Centered campaign header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;PageHeader
-  eyebrow="Safety guide"
-  title="Prepare your family for emergencies"
-  description="Practical guidance for creating a plan, preparing supplies, and staying informed."
-  icon="icon-[lucide--trash-2]"
-  align="center"
-  centered="true"
-  size="lg"
-  maxWidth="wide"
-  showBreadcrumbs="true"
-  breadcrumbs='[
-    <span>&#123;</span>
-      "id": "page-header-2-1",
-      "key": "page-header-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "page-header-2-2",
-      "key": "page-header-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  breadcrumbParentHref="#page-header-demo"
-  primaryLabel="Advanced example"
-  primaryHref="#page-header-demo"
-  secondaryLabel="Advanced example"
-  secondaryHref="#page-header-demo"
-  variant="minimal"&gt;
-  &lt;div data-slot="meta"&gt;
-    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PageHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>"page-title"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>showBreadcrumbs</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>breadcrumbs</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>breadcrumbParent</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>breadcrumbParentHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>breadcrumbCurrent</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>borderBottom</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#page-header-demo-1">Page header with actions</a><a href="#page-header-demo-2">Compact service header</a><a href="#page-header-demo-3">Centered campaign header</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/marketing-section-header"><small>Previous</small><strong>← Marketing Section Header</strong></a>
-      <a href="/components/split-hero"><small>Next</small><strong>Split Hero →</strong></a>
-    </nav>
-  }
-}

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

@@ -3,16 +3,17 @@ page PaginationDetail {
   layout = "showcase"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "3")
-  state playground_pageSize = Number(ctx.url.searchParams.get("pg_pageSize") ?? "3")
-  state playground_total = Number(ctx.url.searchParams.get("pg_total") ?? "3")
+  state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
+  state playground_pageSize = Number(ctx.url.searchParams.get("pg_pageSize") ?? "10")
+  state playground_total = Number(ctx.url.searchParams.get("pg_total") ?? "0")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "compact"
-  state playground_siblingCount = Number(ctx.url.searchParams.get("pg_siblingCount") ?? "3")
+  state playground_siblingCount = Number(ctx.url.searchParams.get("pg_siblingCount") ?? "1")
   state playground_showSummary = (ctx.url.searchParams.get("pg_showSummary") ?? "true") === "true"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination"
-  state playground_previousLabel = ctx.url.searchParams.get("pg_previousLabel") ?? "Pagination"
-  state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Pagination"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_previousLabel = ctx.url.searchParams.get("pg_previousLabel") ?? "Previous"
+  state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Next"
+  state playground_hrefTemplate = ctx.url.searchParams.get("pg_hrefTemplate") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Pagination"
     description = "Theme-aware, responsive pagination component."
@@ -26,7 +27,7 @@ page PaginationDetail {
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Pagination</h1>
         <p>Theme-aware, responsive pagination component.</p>
-        <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -35,24 +36,17 @@ page PaginationDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Pagination color='{playground_color}' size='{playground_size}' page='{playground_page}' pageSize='{playground_pageSize}' total='{playground_total}' variant='{playground_variant}' siblingCount='{playground_siblingCount}' showSummary='{playground_showSummary}' label='{playground_label}' previousLabel='{playground_previousLabel}' nextLabel='{playground_nextLabel}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Pagination color='{playground_color}' size='{playground_size}' page='{playground_page}' pageSize='{playground_pageSize}' total='{playground_total}' variant='{playground_variant}' siblingCount='{playground_siblingCount}' showSummary='{playground_showSummary}' label='{playground_label}' previousLabel='{playground_previousLabel}' nextLabel='{playground_nextLabel}' hrefTemplate='{playground_hrefTemplate}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Pagination
-  page="3"
-  pageSize="3"
-  total="3"
-  siblingCount="3"
-  previousLabel="Pagination"
-  nextLabel="Pagination"
-/&gt;</code></pre>
+            <pre><code data-playground-code>&lt;Pagination /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-page"><span><strong>page</strong><small>number</small></span><input id="playground-pagination-page" name="pg_page" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-pagination-pageSize" name="pg_pageSize" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-total"><span><strong>total</strong><small>number</small></span><input id="playground-pagination-total" name="pg_total" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-pagination-variant" name="pg_variant" type="text" value="compact" /></label><label class="playground-field" for="playground-pagination-siblingCount"><span><strong>sibling Count</strong><small>number</small></span><input id="playground-pagination-siblingCount" name="pg_siblingCount" type="number" value="3" /></label><label class="playground-toggle" for="playground-pagination-showSummary"><span><strong>show Summary</strong><small>boolean</small></span><input id="playground-pagination-showSummary" name="pg_showSummary" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-previousLabel"><span><strong>previous Label</strong><small>string</small></span><input id="playground-pagination-previousLabel" name="pg_previousLabel" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-nextLabel"><span><strong>next Label</strong><small>string</small></span><input id="playground-pagination-nextLabel" name="pg_nextLabel" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-class"><span><strong>class</strong><small>string</small></span><input id="playground-pagination-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-page"><span><strong>page</strong><small>number</small></span><input id="playground-pagination-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-pagination-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-pagination-pageSize" name="pg_pageSize" type="number" value="10" /></label><label class="playground-field" for="playground-pagination-total"><span><strong>total</strong><small>number</small></span><input id="playground-pagination-total" name="pg_total" type="number" value="0" /></label><label class="playground-field" for="playground-pagination-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-pagination-variant" name="pg_variant" type="text" value="compact" /></label><label class="playground-field" for="playground-pagination-siblingCount"><span><strong>sibling Count</strong><small>number</small></span><input id="playground-pagination-siblingCount" name="pg_siblingCount" type="number" value="1" /></label><label class="playground-toggle" for="playground-pagination-showSummary"><span><strong>show Summary</strong><small>boolean</small></span><input id="playground-pagination-showSummary" name="pg_showSummary" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-previousLabel"><span><strong>previous Label</strong><small>string</small></span><input id="playground-pagination-previousLabel" name="pg_previousLabel" type="text" value="Previous" /></label><label class="playground-field" for="playground-pagination-nextLabel"><span><strong>next Label</strong><small>string</small></span><input id="playground-pagination-nextLabel" name="pg_nextLabel" type="text" value="Next" /></label><label class="playground-field" for="playground-pagination-hrefTemplate"><span><strong>href Template</strong><small>string</small></span><input id="playground-pagination-hrefTemplate" name="pg_hrefTemplate" type="text" value="" /></label><label class="playground-field" for="playground-pagination-class"><span><strong>class</strong><small>string</small></span><input id="playground-pagination-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -68,16 +62,13 @@ page PaginationDetail {
           <div id="pagination-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Pagination size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="3" showSummary="true" label="Pagination" previousLabel="Pagination" nextLabel="Pagination" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Pagination color="primary" size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact arrows usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Pagination
   page="2"
   total="137"
-  siblingCount="3"
-  previousLabel="Pagination"
-  nextLabel="Pagination"
 /&gt;</code></pre>
           </section>
         </div>
@@ -91,18 +82,14 @@ page PaginationDetail {
           <div id="pagination-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Pagination size="sm" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Compact example" previousLabel="Compact example" nextLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Pagination color="primary" size="default" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Numbered pages usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Pagination
-  size="sm"
   page="5"
   total="200"
   variant="numbered"
-  label="Compact example"
-  previousLabel="Compact example"
-  nextLabel="Compact example"
 /&gt;</code></pre>
           </section>
         </div>
@@ -116,20 +103,16 @@ page PaginationDetail {
           <div id="pagination-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Pagination size="lg" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Advanced example" previousLabel="Advanced example" nextLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Pagination color="primary" size="default" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Wider window usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Pagination
-  size="lg"
   page="8"
   pageSize="25"
   total="900"
   variant="numbered"
   siblingCount="2"
-  label="Advanced example"
-  previousLabel="Advanced example"
-  nextLabel="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
@@ -153,7 +136,7 @@ if (component) registerOutputHandler(component, "previous", (payload) =&gt; <spa
 if (component) registerOutputHandler(component, "next", (payload) =&gt; <span>&#123;</span>
   console.log("next", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>pageSize</code></td><td>number</td><td><code>10</code></td><td>No</td></tr><tr><td><code>total</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>siblingCount</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showSummary</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>previousLabel</code></td><td>string</td><td><code>"Previous"</code></td><td>No</td></tr><tr><td><code>nextLabel</code></td><td>string</td><td><code>"Next"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>pageSize</code></td><td>number</td><td><code>10</code></td><td>No</td></tr><tr><td><code>total</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>siblingCount</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showSummary</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>previousLabel</code></td><td>string</td><td><code>"Previous"</code></td><td>No</td></tr><tr><td><code>nextLabel</code></td><td>string</td><td><code>"Next"</code></td><td>No</td></tr><tr><td><code>hrefTemplate</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Compact arrows</a><a href="#pagination-demo-2">Numbered pages</a><a href="#pagination-demo-3">Wider window</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/preference-switcher.wrn

@@ -6,9 +6,16 @@ page PreferenceSwitcherDetail {
   state playground_themeLabel = ctx.url.searchParams.get("pg_themeLabel") ?? "Preference Switcher"
   state playground_colorLabel = ctx.url.searchParams.get("pg_colorLabel") ?? "Preference Switcher"
   state playground_languageLabel = ctx.url.searchParams.get("pg_languageLabel") ?? "Preference Switcher"
-  state playground_languages = ctx.url.searchParams.get("pg_languages") ?? ""
-  state playground_colors = ctx.url.searchParams.get("pg_colors") ?? ""
+  state playground_languages = JSON.parse(ctx.url.searchParams.get("pg_languages") ?? "[]")
+  state playground_colors = JSON.parse(ctx.url.searchParams.get("pg_colors") ?? "[]")
   state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
+  state playground_iconOnly = (ctx.url.searchParams.get("pg_iconOnly") ?? "true") === "true"
+  state playground_themeIcon = ctx.url.searchParams.get("pg_themeIcon") ?? "icon-[lucide--sun-moon]"
+  state playground_colorIcon = ctx.url.searchParams.get("pg_colorIcon") ?? "icon-[lucide--palette]"
+  state playground_languageIcon = ctx.url.searchParams.get("pg_languageIcon") ?? "icon-[lucide--languages]"
+  state playground_panelPlacement = ctx.url.searchParams.get("pg_panelPlacement") ?? "bottom-end"
+  state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "dropdown"
+  state playground_showCurrentLanguage = (ctx.url.searchParams.get("pg_showCurrentLanguage") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Preference Switcher"
@@ -23,7 +30,7 @@ page PreferenceSwitcherDetail {
         <span class="showcase-eyebrow">Core component</span>
         <h1>Preference Switcher</h1>
         <p>Reusable preference switcher component.</p>
-        <div class="detail-badges"><span>9 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>16 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -32,7 +39,7 @@ page PreferenceSwitcherDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><PreferenceSwitcher size='{playground_size}' color='{playground_color}' themeLabel='{playground_themeLabel}' colorLabel='{playground_colorLabel}' languageLabel='{playground_languageLabel}' languages='{playground_languages}' colors='{playground_colors}' compact='{playground_compact}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><PreferenceSwitcher size='{playground_size}' color='{playground_color}' themeLabel='{playground_themeLabel}' colorLabel='{playground_colorLabel}' languageLabel='{playground_languageLabel}' languages='{playground_languages}' colors='{playground_colors}' compact='{playground_compact}' iconOnly='{playground_iconOnly}' themeIcon='{playground_themeIcon}' colorIcon='{playground_colorIcon}' languageIcon='{playground_languageIcon}' panelPlacement='{playground_panelPlacement}' mobilePanel='{playground_mobilePanel}' showCurrentLanguage='{playground_showCurrentLanguage}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;PreferenceSwitcher
@@ -46,8 +53,8 @@ page PreferenceSwitcherDetail {
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-preference-switcher-size"><span><strong>size</strong><small>string</small></span><select id="playground-preference-switcher-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-preference-switcher-color"><span><strong>color</strong><small>string</small></span><select id="playground-preference-switcher-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-preference-switcher-themeLabel"><span><strong>theme Label</strong><small>string</small></span><input id="playground-preference-switcher-themeLabel" name="pg_themeLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-colorLabel"><span><strong>color Label</strong><small>string</small></span><input id="playground-preference-switcher-colorLabel" name="pg_colorLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languageLabel"><span><strong>language Label</strong><small>string</small></span><input id="playground-preference-switcher-languageLabel" name="pg_languageLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languages"><span><strong>languages</strong><small>string</small></span><input id="playground-preference-switcher-languages" name="pg_languages" type="text" value="" /></label><label class="playground-field" for="playground-preference-switcher-colors"><span><strong>colors</strong><small>string</small></span><input id="playground-preference-switcher-colors" name="pg_colors" type="text" value="" /></label><label class="playground-toggle" for="playground-preference-switcher-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-preference-switcher-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-preference-switcher-class"><span><strong>class</strong><small>string</small></span><input id="playground-preference-switcher-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>16 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-preference-switcher-size"><span><strong>size</strong><small>string</small></span><select id="playground-preference-switcher-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-preference-switcher-color"><span><strong>color</strong><small>string</small></span><select id="playground-preference-switcher-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-preference-switcher-themeLabel"><span><strong>theme Label</strong><small>string</small></span><input id="playground-preference-switcher-themeLabel" name="pg_themeLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-colorLabel"><span><strong>color Label</strong><small>string</small></span><input id="playground-preference-switcher-colorLabel" name="pg_colorLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languageLabel"><span><strong>language Label</strong><small>string</small></span><input id="playground-preference-switcher-languageLabel" name="pg_languageLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languages"><span><strong>languages</strong><small>string</small></span><textarea id="playground-preference-switcher-languages" name="pg_languages" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-preference-switcher-colors"><span><strong>colors</strong><small>string</small></span><textarea id="playground-preference-switcher-colors" name="pg_colors" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-preference-switcher-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-preference-switcher-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-preference-switcher-iconOnly"><span><strong>icon Only</strong><small>boolean</small></span><input id="playground-preference-switcher-iconOnly" name="pg_iconOnly" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-preference-switcher-themeIcon"><span><strong>theme Icon</strong><small>string</small></span><input id="playground-preference-switcher-themeIcon" name="pg_themeIcon" type="text" value="icon-[lucide--sun-moon]" /></label><label class="playground-field" for="playground-preference-switcher-colorIcon"><span><strong>color Icon</strong><small>string</small></span><input id="playground-preference-switcher-colorIcon" name="pg_colorIcon" type="text" value="icon-[lucide--palette]" /></label><label class="playground-field" for="playground-preference-switcher-languageIcon"><span><strong>language Icon</strong><small>string</small></span><input id="playground-preference-switcher-languageIcon" name="pg_languageIcon" type="text" value="icon-[lucide--languages]" /></label><label class="playground-field" for="playground-preference-switcher-panelPlacement"><span><strong>panel Placement</strong><small>string</small></span><input id="playground-preference-switcher-panelPlacement" name="pg_panelPlacement" type="text" value="bottom-end" /></label><label class="playground-field" for="playground-preference-switcher-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-preference-switcher-mobilePanel" name="pg_mobilePanel" type="text" value="dropdown" /></label><label class="playground-toggle" for="playground-preference-switcher-showCurrentLanguage"><span><strong>show Current Language</strong><small>boolean</small></span><input id="playground-preference-switcher-showCurrentLanguage" name="pg_showCurrentLanguage" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-preference-switcher-class"><span><strong>class</strong><small>string</small></span><input id="playground-preference-switcher-class" name="pg_class" type="teLine truncated
         </form>
       </div>
     </section>
@@ -63,7 +70,7 @@ page PreferenceSwitcherDetail {
           <div id="preference-switcher-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -85,7 +92,7 @@ page PreferenceSwitcherDetail {
           <div id="preference-switcher-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -107,7 +114,7 @@ page PreferenceSwitcherDetail {
           <div id="preference-switcher-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -140,14 +147,14 @@ if (component) registerOutputHandler(component, "color", (payload) =&gt; <span>&
 if (component) registerOutputHandler(component, "language", (payload) =&gt; <span>&#123;</span>
   console.log("language", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>themeLabel</code></td><td>string</td><td><code>"Theme"</code></td><td>No</td></tr><tr><td><code>colorLabel</code></td><td>string</td><td><code>"Accent color"</code></td><td>No</td></tr><tr><td><code>languageLabel</code></td><td>string</td><td><code>"Language"</code></td><td>No</td></tr><tr><td><code>languages</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>colors</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>themeLabel</code></td><td>string</td><td><code>"Theme"</code></td><td>No</td></tr><tr><td><code>colorLabel</code></td><td>string</td><td><code>"Accent color"</code></td><td>No</td></tr><tr><td><code>languageLabel</code></td><td>string</td><td><code>"Language"</code></td><td>No</td></tr><tr><td><code>languages</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>colors</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>iconOnly</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>themeIcon</code></td><td>string</td><td><code>"icon-[lucide--sun-moon]"</code></td><td>No</td></tr><tr><td><code>colorIcon</code></td><td>string</td><td><code>"icon-[lucide--palette]"</code></td><td>No</td></tr><tr><td><code>languageIcon</code></td><td>string</td><td><code>"icon-[lucide--languages]"</code></td><td>No</td></tr><tr><td><code>panelPlacement</code></td><td>string</td><td><code>"bottom-end"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"dropdown"</code></td><td>No</td></tr><tr><td><code>showCurrentLanguage</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#preference-switcher-demo-1">Production default</a><a href="#preference-switcher-demo-2">Compact application</a><a href="#preference-switcher-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/portal-dashboard"><small>Previous</small><strong>← Portal Dashboard</strong></a>
+      <span></span>
       <a href="/components/toaster"><small>Next</small><strong>Toaster →</strong></a>
     </nav>
   }

examples/component-showcase/app/pages/components/public-page-shell.wrn

@@ -1,190 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page PublicPageShellDetail {
-  layout = "showcase"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
-  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
-  state playground_headerOffset = ctx.url.searchParams.get("pg_headerOffset") ?? "none"
-  state playground_background = ctx.url.searchParams.get("pg_background") ?? "default"
-  state playground_overflow = ctx.url.searchParams.get("pg_overflow") ?? "clip"
-  state playground_minHeight = ctx.url.searchParams.get("pg_minHeight") ?? "screen"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Public Page Shell"
-    description = "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Public Page Shell</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
-        <h1>Public Page Shell</h1>
-        <p>Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.</p>
-        <div class="detail-badges"><span>10 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PublicPageShell" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Public Page Shell</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><PublicPageShell maxWidth='{playground_maxWidth}' fullWidth='{playground_fullWidth}' headerOffset='{playground_headerOffset}' background='{playground_background}' overflow='{playground_overflow}' minHeight='{playground_minHeight}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}'>
-<div class="showcase-shell-preview">
-  <header>Header slot</header>
-  <main>Public page content</main>
-  <footer>Footer slot</footer>
-</div></PublicPageShell></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;PublicPageShell
-  fullWidth="false"&gt;
-  &lt;div data-slot="before"&gt;
-    &lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="after"&gt;
-    &lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PublicPageShell&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-public-page-shell-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-public-page-shell-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-public-page-shell-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-public-page-shell-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-public-page-shell-headerOffset"><span><strong>header Offset</strong><small>string</small></span><select id="playground-public-page-shell-headerOffset" name="pg_headerOffset"><option value="none" selected>none</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-public-page-shell-background"><span><strong>background</strong><small>string</small></span><select id="playground-public-page-shell-background" name="pg_background"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="transparent">transparent</option></select></label><label class="playground-field" for="playground-public-page-shell-overflow"><span><strong>overflow</strong><small>string</small></span><select id="playground-public-page-shell-overflow" name="pg_overflow"><option value="clip" selected>clip</option><option value="visible">visible</option><option value="hidden">hidden</option><option value="auto">auto</option></select></label><label class="playground-field" for="playground-public-page-shell-minHeight"><span><strong>min Height</strong><small>string</small></span><select id="playground-public-page-shell-minHeight" name="pg_minHeight"><option value="screen" selected>screen</option><option value="none">none</option><option value="full">full</option></select></label><label class="playground-field" for="playground-public-page-shell-size"><span><strong>size</strong><small>string</small></span><select id="playground-public-page-shell-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-public-page-shell-color"><span><strong>color</strong><small>string</small></span><select id="playground-public-page-shell-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-public-page-shell-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-public-page-shell-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-public-page-shell-class"><span><strong>class</strong><small>string</small></span><input id="playground-public-page-shell-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Complete public page shell</h2><p>Use the shell around a complete marketing or public-service page.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="public-page-shell-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><PublicPageShell maxWidth="xl" fullWidth="false" background="default" size="default" variant="default" class="showcase-instance showcase-instance--1">
-<div class="showcase-shell-preview">
-  <header>Header slot</header>
-  <main>Public page content</main>
-  <footer>Footer slot</footer>
-</div></PublicPageShell></div>
-          </div>
-          <section class="demo-code" aria-label="Complete public page shell usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;PublicPageShell
-  maxWidth="xl"
-  fullWidth="false"&gt;
-  &lt;div data-slot="before"&gt;
-    &lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="showcase-shell-preview"&gt;
-    &lt;header&gt;Header slot&lt;/header&gt;
-    &lt;main&gt;Public page content&lt;/main&gt;
-    &lt;footer&gt;Footer slot&lt;/footer&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="after"&gt;
-    &lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PublicPageShell&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Constrained documentation shell</h2><p>Keep long-form documentation readable with a compact content width.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="public-page-shell-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><PublicPageShell maxWidth="compact" fullWidth="false" headerOffset="sm" background="soft" size="sm" variant="secondary" class="showcase-instance showcase-instance--2">
-<div class="showcase-shell-preview">
-  <header>Header slot</header>
-  <main>Public page content</main>
-  <footer>Footer slot</footer>
-</div></PublicPageShell></div>
-          </div>
-          <section class="demo-code" aria-label="Constrained documentation shell usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;PublicPageShell
-  maxWidth="compact"
-  fullWidth="false"
-  headerOffset="sm"
-  background="soft"
-  size="sm"
-  variant="secondary"&gt;
-  &lt;div data-slot="before"&gt;
-    &lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="showcase-shell-preview"&gt;
-    &lt;header&gt;Header slot&lt;/header&gt;
-    &lt;main&gt;Public page content&lt;/main&gt;
-    &lt;footer&gt;Footer slot&lt;/footer&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="after"&gt;
-    &lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PublicPageShell&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-bleed landing page</h2><p>Allow full-width sections while keeping overflow and minimum-height behavior consistent.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="public-page-shell-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><PublicPageShell maxWidth="full" fullWidth="true" overflow="clip" minHeight="screen" size="lg" variant="success" class="showcase-instance showcase-instance--3">
-<div class="showcase-shell-preview">
-  <header>Header slot</header>
-  <main>Public page content</main>
-  <footer>Footer slot</footer>
-</div></PublicPageShell></div>
-          </div>
-          <section class="demo-code" aria-label="Full-bleed landing page usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;PublicPageShell
-  size="lg"
-  variant="success"&gt;
-  &lt;div data-slot="before"&gt;
-    &lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="showcase-shell-preview"&gt;
-    &lt;header&gt;Header slot&lt;/header&gt;
-    &lt;main&gt;Public page content&lt;/main&gt;
-    &lt;footer&gt;Footer slot&lt;/footer&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="after"&gt;
-    &lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/PublicPageShell&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>headerOffset</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>background</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>overflow</code></td><td>string</td><td><code>"clip"</code></td><td>No</td></tr><tr><td><code>minHeight</code></td><td>string</td><td><code>"screen"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#public-page-shell-demo-1">Complete public page shell</a><a href="#public-page-shell-demo-2">Constrained documentation shell</a><a href="#public-page-shell-demo-3">Full-bleed landing page</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/link"><small>Previous</small><strong>← Link</strong></a>
-      <a href="/components/section"><small>Next</small><strong>Section →</strong></a>
-    </nav>
-  }
-}

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

@@ -51,118 +51,123 @@ page RadioDetail {
           <div class="playground-preview-source" data-playground-preview><Radio size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' options='{playground_options}' checked='{playground_checked}' orientation='{playground_orientation}' card='{playground_card}' rightAligned='{playground_rightAligned}' list='{playground_list}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Radio
-  placeholder="Enter a sample value"
-  value="sample-1"
-  options='[
-    <span>&#123;</span>
-      "id": "radio-0-1",
-      "key": "radio-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "radio-0-2",
-      "key": "radio-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page RadioExample <span>&#123;</span>
+  state options = [
+  <span>&#123;</span>
+    "id": "radio-0-1",
+    "key": "radio-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "radio-0-2",
+    "key": "radio-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Radio
+      placeholder="Enter a sample value"
+      value="sample-1"
+      options="<span>&#123;</span>options<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -296,118 +301,123 @@ page RadioDetail {
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  placeholder="Enter a sample value"
-  value="sample-1"
-  options='[
-    <span>&#123;</span>
-      "id": "radio-0-1",
-      "key": "radio-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "radio-0-2",
-      "key": "radio-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page RadioExample <span>&#123;</span>
+  state options = [
+  <span>&#123;</span>
+    "id": "radio-0-1",
+    "key": "radio-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "radio-0-2",
+    "key": "radio-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Radio
+      placeholder="Enter a sample value"
+      value="sample-1"
+      options="<span>&#123;</span>options<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -424,122 +434,127 @@ page RadioDetail {
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  size="sm"
-  label="Compact example"
-  placeholder="Enter a sample value"
-  variant="secondary"
-  icon="icon-[lucide--arrow-right]"
-  value="sample-2"
-  options='[
-    <span>&#123;</span>
-      "id": "radio-1-1",
-      "key": "radio-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "radio-1-2",
-      "key": "radio-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page RadioExample <span>&#123;</span>
+  state options = [
+  <span>&#123;</span>
+    "id": "radio-1-1",
+    "key": "radio-1-1",
+    "value": "primary",
+    "label": "Secondary workflow",
+    "title": "Secondary workflow",
+    "description": "A compact configuration designed for dense application layouts.",
+    "text": "A configurable sample message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--zap]",
+    "iconClass": "icon-[lucide--zap]",
+    "variant": "secondary",
+    "status": "Active",
+    "time": "10:15",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 24,
+    "percentage": 48,
+    "color": "#0284c7",
+    "target": "_self",
+    "ariaLabel": "Open secondary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "radio-1-2",
+    "key": "radio-1-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A compact configuration designed for dense application layouts.",
+    "text": "Another configurable message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--zap]",
+    "iconClass": "icon-[lucide--zap]",
+    "variant": "secondary",
+    "status": "Active",
+    "time": "10:15",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 48,
+    "percentage": 48,
+    "color": "#0284c7",
+    "target": "_self",
+    "ariaLabel": "Open secondary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Radio
+      size="sm"
+      label="Compact example"
+      placeholder="Enter a sample value"
+      variant="secondary"
+      icon="icon-[lucide--arrow-right]"
+      value="sample-2"
+      options="<span>&#123;</span>options<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -556,122 +571,127 @@ page RadioDetail {
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  size="lg"
-  label="Advanced example"
-  placeholder="Search by name, email, or identifier"
-  variant="success"
-  icon="icon-[lucide--trash-2]"
-  value="sample-3"
-  options='[
-    <span>&#123;</span>
-      "id": "radio-2-1",
-      "key": "radio-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "radio-2-2",
-      "key": "radio-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#radio-demo",
-      "actionHref": "#radio-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page RadioExample <span>&#123;</span>
+  state options = [
+  <span>&#123;</span>
+    "id": "radio-2-1",
+    "key": "radio-2-1",
+    "value": "primary",
+    "label": "Advanced workflow",
+    "title": "Advanced workflow",
+    "description": "A richer configuration with more supporting information and actions.",
+    "text": "A configurable sample message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "Explore workflow",
+    "icon": "icon-[lucide--circle-check]",
+    "iconClass": "icon-[lucide--circle-check]",
+    "variant": "success",
+    "status": "Complete",
+    "time": "11:45",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 32,
+    "percentage": 91,
+    "color": "#059669",
+    "target": "_self",
+    "ariaLabel": "Open advanced workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Unlimited"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "radio-2-2",
+    "key": "radio-2-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A richer configuration with more supporting information and actions.",
+    "text": "Another configurable message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "Explore workflow",
+    "icon": "icon-[lucide--circle-check]",
+    "iconClass": "icon-[lucide--circle-check]",
+    "variant": "success",
+    "status": "Complete",
+    "time": "11:45",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": true,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 64,
+    "percentage": 91,
+    "color": "#059669",
+    "target": "_self",
+    "ariaLabel": "Open advanced workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Unlimited"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Radio
+      size="lg"
+      label="Advanced example"
+      placeholder="Search by name, email, or identifier"
+      variant="success"
+      icon="icon-[lucide--trash-2]"
+      value="sample-3"
+      options="<span>&#123;</span>options<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>

examples/component-showcase/app/pages/components/range-slider.wrn

@@ -4,21 +4,21 @@ page RangeSliderDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? "volume"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Volume"
   state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "40")
   state playground_min = Number(ctx.url.searchParams.get("pg_min") ?? "0")
   state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
   state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
   state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
   state playground_showBounds = (ctx.url.searchParams.get("pg_showBounds") ?? "true") === "true"
-  state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "true") === "true"
-  state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[{\"id\":\"range-slider-0-1\",\"key\":\"range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"range-slider-0-2\",\"key\":\"range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "false") === "true"
+  state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[]")
   state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
@@ -26,7 +26,7 @@ page RangeSliderDetail {
   state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
   state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Range Slider"
     description = "Theme-aware, responsive range slider component."
@@ -52,234 +52,24 @@ page RangeSliderDetail {
           <div class="playground-preview-source" data-playground-preview><RangeSlider size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' min='{playground_min}' max='{playground_max}' step='{playground_step}' showValue='{playground_showValue}' showBounds='{playground_showBounds}' showSteps='{playground_showSteps}' marks='{playground_marks}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;RangeSlider
-  label="Range Slider"
-  placeholder="Enter a sample value"
-  value="36"
-  showSteps="true"
-  marks='[
-    <span>&#123;</span>
-      "id": "range-slider-0-1",
-      "key": "range-slider-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "range-slider-0-2",
-      "key": "range-slider-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page RangeSliderExample <span>&#123;</span>
+  state marks = []
+  view <span>&#123;</span>
+    &lt;RangeSlider
+      name="volume"
+      label="Volume"
+      value="40"
+      marks="<span>&#123;</span>marks<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Range Slider" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-range-slider-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-marks"><span><strong>marks</strong><small>unknown[]</small></span><textarea id="playground-range-slider-marks" name="pg_marks" rows="5" spellcheck="false" dLine truncated
-  &#123;
-    "id": "range-slider-0-1",
-    "key": "range-slider-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#range-slider-demo",
-    "actionHref": "#range-slider-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  &#125;,
-  &#123;
-    "id": "range-slider-0-2",
-    "key": "range-slider-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#range-slider-demo",
-    "actionHref": "#range-slider-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-range-slider-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-range-slider-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-range-slider-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-error"><span><strong>error</strong><small>string</small></span><input id="playground-range-slider-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-range-slider-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-range-slider-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-range-slider-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-range-slider-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-range-slider-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="volume" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Volume" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-range-slider-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="40" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-marks"><span><strong>marks</strong><small>unknown[]</small></span><textarea id="playground-range-slider-marks" name="pg_marks" rows="5" spellcheck="false" data-playground-json>[]</textLine truncated
         </form>
       </div>
     </section>
@@ -288,397 +78,30 @@ page RangeSliderDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Fractional steps</h2><p>Use step=0.2 for precise increments with buttons, dragging, or arrow keys.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="range-slider-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><RangeSlider size="default" label="Range Slider" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="36" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-0-1","key":"range-slider-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"range-slider-0-2","key":"range-slider-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><RangeSlider size="default" color="primary" id="" name="volume" label="Scale" hiddenLabel="false" placeholder="" variant="normal" icon="" iconPosition="start" value="2.4" min="0" max="5" step="0.2" showValue="true" showBounds="true" showSteps="false" marks='[]' helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Fractional steps usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;RangeSlider
-  label="Range Slider"
-  placeholder="Enter a sample value"
-  value="36"
-  showSteps="true"
-  marks='[
-    <span>&#123;</span>
-      "id": "range-slider-0-1",
-      "key": "range-slider-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "range-slider-0-2",
-      "key": "range-slider-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="range-slider-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><RangeSlider size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="60" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-1-1","key":"range-slider-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"range-slider-1-2","key":"range-slider-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Compact application usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;RangeSlider
-  size="sm"
-  label="Compact example"
-  placeholder="Enter a sample value"
-  variant="secondary"
-  icon="icon-[lucide--arrow-right]"
-  value="60"
-  showSteps="true"
-  marks='[
-    <span>&#123;</span>
-      "id": "range-slider-1-1",
-      "key": "range-slider-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "range-slider-1-2",
-      "key": "range-slider-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="range-slider-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><RangeSlider size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="84" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-2-1","key":"range-slider-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"range-slider-2-2","key":"range-slider-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;RangeSlider
-  size="lg"
-  label="Advanced example"
-  placeholder="Search by name, email, or identifier"
-  variant="success"
-  icon="icon-[lucide--trash-2]"
-  value="84"
-  showSteps="true"
-  marks='[
-    <span>&#123;</span>
-      "id": "range-slider-2-1",
-      "key": "range-slider-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "range-slider-2-2",
-      "key": "range-slider-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#range-slider-demo",
-      "actionHref": "#range-slider-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page RangeSliderExample <span>&#123;</span>
+  state marks = []
+  view <span>&#123;</span>
+    &lt;RangeSlider
+      name="volume"
+      label="Scale"
+      value="2.4"
+      max="5"
+      step="0.2"
+      marks="<span>&#123;</span>marks<span>&#125;</span>"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -709,7 +132,7 @@ if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Range"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>min</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showBounds</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showSteps</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>marks</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Production default</a><a href="#range-slider-demo-2">Compact application</a><a href="#range-slider-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Fractional steps</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -3,11 +3,16 @@ page RatingDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Rating example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default rating for a modern application."
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"rating-0-1\",\"key\":\"rating-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#rating-demo\",\"actionHref\":\"#rating-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"rating-0-2\",\"key\":\"rating-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#rating-demo\",\"actionHref\":\"#rating-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "How was your experience?"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "4")
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "5")
+  state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Rating"
     description = "Theme-aware, responsive rating component."
@@ -21,7 +26,7 @@ page RatingDetail {
         <span class="showcase-eyebrow">Base component</span>
         <h1>Rating</h1>
         <p>Theme-aware, responsive rating component.</p>
-        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -30,235 +35,26 @@ page RatingDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Rating size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Rating size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' value='{playground_value}' max='{playground_max}' step='{playground_step}' readonly='{playground_readonly}' disabled='{playground_disabled}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Rating
-  title="Rating example"
-  description="A polished default rating for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "rating-0-1",
-      "key": "rating-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "rating-0-2",
-      "key": "rating-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code data-playground-code>page RatingExample <span>&#123;</span>
+  state items = []
+  view <span>&#123;</span>
+    &lt;Rating
+      title="How was your experience?"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="4"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="Rating example" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="A polished default rating for a modern application." /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  &#123;
-    "id": "rating-0-1",
-    "key": "rating-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#rating-demo",
-    "actionHref": "#rating-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  &#125;,
-  &#123;
-    "id": "rating-0-2",
-    "key": "rating-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#rating-demo",
-    "actionHref": "#rating-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      &#123;
-        "label": "Nested option A",
-        "value": "nested-a"
-      &#125;,
-      &#123;
-        "label": "Nested option B",
-        "value": "nested-b"
-      &#125;
-    ],
-    "links": [
-      &#123;
-        "label": "Documentation",
-        "href": "#documentation"
-      &#125;,
-      &#123;
-        "label": "API reference",
-        "href": "#api-reference"
-      &#125;
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="How was your experience?" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-value"><span><strong>value</strong><small>number</small></span><input id="playground-rating-value" name="pg_value" type="number" value="4" /></label><label class="playground-field" for="playground-rating-max"><span><strong>max</strong><small>number</small></span><input id="playground-rating-max" name="pg_max" type="number" value="5" /></label><label class="playground-field" for="playground-rating-step"><span><strong>step</strong><small>number</small></span><input id="playground-rating-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-rating-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-rating-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-rating-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-rating-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -267,389 +63,82 @@ page RatingDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Whole stars</h2><p>Choose a rating from zero to five with step 1.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="rating-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Rating size="default" title="Rating example" description="A polished default rating for a modern application." items='[{"id":"rating-0-1","key":"rating-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Whole stars usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Rating
-  title="Rating example"
-  description="A polished default rating for a modern application."
-  items='[
-    <span>&#123;</span>
-      "id": "rating-0-1",
-      "key": "rating-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "rating-0-2",
-      "key": "rating-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-/&gt;</code></pre>
+            <pre><code>page RatingExample <span>&#123;</span>
+  state items = []
+  view <span>&#123;</span>
+    &lt;Rating
+      title="Rate your experience"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="3"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Half stars</h2><p>Click a half star or use the precise slider and arrow keys.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="rating-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Rating size="sm" title="Compact Rating" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"rating-1-1","key":"rating-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-1-2","key":"rating-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Rating size="default" color="primary" title="Half-star rating" description="" items='[]' variant="default" value="3.5" max="5" step="0.5" readonly="false" disabled="false" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Half stars usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Rating
-  size="sm"
-  title="Compact Rating"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    <span>&#123;</span>
-      "id": "rating-1-1",
-      "key": "rating-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "rating-1-2",
-      "key": "rating-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="secondary"
-/&gt;</code></pre>
+            <pre><code>page RatingExample <span>&#123;</span>
+  state items = []
+  view <span>&#123;</span>
+    &lt;Rating
+      title="Half-star rating"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="3.5"
+      step="0.5"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Fine increments</h2><p>Use increments of 0.2 for a more precise rating.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="rating-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Rating size="lg" title="Advanced Rating" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"rating-2-1","key":"rating-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"rating-2-2","key":"rating-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Rating size="default" color="primary" title="Detailed score" description="" items='[]' variant="default" value="4.2" max="5" step="0.2" readonly="true" disabled="false" class="" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Fine increments usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Rating
-  size="lg"
-  title="Advanced Rating"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    <span>&#123;</span>
-      "id": "rating-2-1",
-      "key": "rating-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "rating-2-2",
-      "key": "rating-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#rating-demo",
-      "actionHref": "#rating-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    <span>&#125;</span>
-  ]'
-  variant="success"
-/&gt;</code></pre>
+            <pre><code>page RatingExample <span>&#123;</span>
+  state items = []
+  view <span>&#123;</span>
+    &lt;Rating
+      title="Detailed score"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      value="4.2"
+      step="0.2"
+      readonly="true"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -667,10 +156,10 @@ if (component) registerOutputHandler(component, "input", (payload) =&gt; <span>&
 if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
   console.log("change", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#rating-demo-1">Production default</a><a href="#rating-demo-2">Compact application</a><a href="#rating-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#rating-demo-1">Whole stars</a><a href="#rating-demo-2">Half stars</a><a href="#rating-demo-3">Fine increments</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -7,6 +7,10 @@ page ScrollspyDetail {
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy"
   state playground_heading = ctx.url.searchParams.get("pg_heading") ?? ""
+  state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
+  state playground_topOffset = ctx.url.searchParams.get("pg_topOffset") ?? "6rem"
+  state playground_sectionOffset = ctx.url.searchParams.get("pg_sectionOffset") ?? "7rem"
+  state playground_collapseAt = ctx.url.searchParams.get("pg_collapseAt") ?? "800px"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Scrollspy"
@@ -21,7 +25,7 @@ page ScrollspyDetail {
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Scrollspy</h1>
         <p>Theme-aware, responsive scrollspy component.</p>
-        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -30,126 +34,131 @@ page ScrollspyDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Scrollspy color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' label='{playground_label}' heading='{playground_heading}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Scrollspy color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' label='{playground_label}' heading='{playground_heading}' sticky='{playground_sticky}' topOffset='{playground_topOffset}' sectionOffset='{playground_sectionOffset}' collapseAt='{playground_collapseAt}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Scrollspy
-  items='[
-    <span>&#123;</span>
-      "id": "scrollspy-0-1",
-      "key": "scrollspy-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#scrollspy-demo",
-      "actionHref": "#scrollspy-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "scrollspy-0-2",
-      "key": "scrollspy-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#scrollspy-demo",
-      "actionHref": "#scrollspy-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  label="Scrollspy"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page ScrollspyExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "scrollspy-0-1",
+    "key": "scrollspy-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#scrollspy-demo",
+    "actionHref": "#scrollspy-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "scrollspy-0-2",
+    "key": "scrollspy-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#scrollspy-demo",
+    "actionHref": "#scrollspy-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Scrollspy
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="Scrollspy"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
     "id": "scrollspy-0-1",
@@ -257,7 +266,7 @@ page ScrollspyDetail {
       "Standard"
     ]
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-heading"><span><strong>heading</strong><small>string</small></span><input id="playground-scrollspy-heading" name="pg_heading" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-heading"><span><strong>heading</strong><small>string</small></span><input id="playground-scrollspy-heading" name="pg_heading" type="text" value="" /></label><label class="playground-toggle" for="playground-scrollspy-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-scrollspy-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-scrollspy-topOffset"><span><strong>top Offset</strong><small>string</small></span><input id="playground-scrollspy-topOffset" name="pg_topOffset" type="text" value="6rem" /></label><label class="playground-field" for="playground-scrollspy-sectionOffset"><span><strong>section Offset</strong><small>string</small></span><input id="playground-scrollspy-sectionOffset" name="pg_sectionOffset" type="text" value="7rem" /></label><label class="playground-field" for="playground-scrollspy-collapseAt"><span><strong>collapse At</strong><small>string</small></span><input id="playground-scrollspy-collapseAt" name="pg_collapseAt" type="text" value="800px" /></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -273,33 +282,38 @@ page ScrollspyDetail {
           <div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" sticky="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Follows the reader usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Scrollspy
-  items='[
-    <span>&#123;</span>
-      "label": "Overview",
-      "href": "#overview"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Installation",
-      "href": "#installation"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Usage",
-      "href": "#usage"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "API",
-      "href": "#api"
-    <span>&#125;</span>
-  ]'
-  active="#overview"
-  label="Scrollspy"
-  heading="On this page"
-/&gt;</code></pre>
+            <pre><code>page ScrollspyExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Overview",
+    "href": "#overview"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Installation",
+    "href": "#installation"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Usage",
+    "href": "#usage"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "API",
+    "href": "#api"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Scrollspy
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="#overview"
+      label="Scrollspy"
+      heading="On this page"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -312,30 +326,35 @@ page ScrollspyDetail {
           <div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" sticky="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact rail usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Scrollspy
-  size="sm"
-  items='[
-    <span>&#123;</span>
-      "label": "Overview",
-      "href": "#overview"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Installation",
-      "href": "#installation"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Usage",
-      "href": "#usage"
-    <span>&#125;</span>
-  ]'
-  active="#installation"
-  label="Compact example"
-  heading="Sections"
-/&gt;</code></pre>
+            <pre><code>page ScrollspyExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Overview",
+    "href": "#overview"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Installation",
+    "href": "#installation"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Usage",
+    "href": "#usage"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Scrollspy
+      size="sm"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="#installation"
+      label="Compact example"
+      heading="Sections"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -348,7 +367,7 @@ const component = document.querySelector("[data-ui-component=\"Scrollspy\"], [da
 if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
   console.log("change", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"On this page"</code></td><td>No</td></tr><tr><td><code>heading</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"On this page"</code></td><td>No</td></tr><tr><td><code>heading</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>topOffset</code></td><td>string</td><td><code>"6rem"</code></td><td>No</td></tr><tr><td><code>sectionOffset</code></td><td>string</td><td><code>"7rem"</code></td><td>No</td></tr><tr><td><code>collapseAt</code></td><td>string</td><td><code>"800px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Follows the reader</a><a href="#scrollspy-demo-2">Compact rail</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>

examples/component-showcase/app/pages/components/section-header.wrn

@@ -1,160 +0,0 @@
-// Generated by scripts/generate-showcase.mjs. Do not edit directly.
-page SectionHeaderDetail {
-  layout = "showcase"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Section Header example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default section header for a modern application."
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_headingLevel = Number(ctx.url.searchParams.get("pg_headingLevel") ?? "2")
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "3xl"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
-  seo {
-    title = "Section Header"
-    description = "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy."
-  }
-  view {
-    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Section Header</span>
-    </nav>
-    <header class="detail-hero">
-      <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
-        <h1>Section Header</h1>
-        <p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p>
-        <div class="detail-badges"><span>10 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
-      </div>
-      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
-    </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="SectionHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
-      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Section Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
-      <div class="playground-workbench">
-        <div class="playground-preview">
-          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><SectionHeader id='{playground_id}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' align='{playground_align}' size='{playground_size}' color='{playground_color}' headingLevel='{playground_headingLevel}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
-          <section class="playground-code" aria-label="Current component code">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;SectionHeader
-  title="Section Header example"
-  description="A polished default section header for a modern application."
-  align="start"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/SectionHeader&gt;</code></pre>
-          </section>
-          <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
-        </div>
-        <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-section-header-title" name="pg_title" type="text" value="Section Header example" /></label><label class="playground-field" for="playground-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-section-header-description" name="pg_description" type="text" value="A polished default section header for a modern application." /></label><label class="playground-field" for="playground-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-header-headingLevel"><span><strong>heading Level</strong><small>number</small></span><input id="playground-section-header-headingLevel" name="pg_headingLevel" type="number" value="2" /></label><label class="playground-field" for="playground-section-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-header-maxWidth" name="pg_maxWidth"><option value="3xl" selected>3xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
-        </form>
-      </div>
-    </section>
-    <div class="detail-layout">
-      <main class="detail-content">
-        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Left-aligned section header</h2><p>Introduce features, services, content groups, or dashboard areas.</p></div>
-          <span class="demo-case-number">01</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="section-header-demo-1" class="demo-canvas demo-canvas--1">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" /></div>
-          </div>
-          <section class="demo-code" aria-label="Left-aligned section header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;SectionHeader
-  eyebrow="Public services"
-  title="Everything citizens need"
-  description="Discover online services, directories, guidance, and verified public information."&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/SectionHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered section header</h2><p>Use centered hierarchy above feature grids, testimonials, and campaign content.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="section-header-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><SectionHeader eyebrow="Capabilities" title="A consistent component system" description="Compose complete pages without rebuilding spacing and typography." align="center" size="compact" headingLevel="2" class="showcase-instance showcase-instance--2" /></div>
-          </div>
-          <section class="demo-code" aria-label="Centered section header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;SectionHeader
-  eyebrow="Capabilities"
-  title="A consistent component system"
-  description="Compose complete pages without rebuilding spacing and typography."
-  align="center"
-  size="compact"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/SectionHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large editorial header</h2><p>Use a larger heading for major landing-page sections and product storytelling.</p></div>
-          <span class="demo-case-number">03</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="section-header-demo-3" class="demo-canvas demo-canvas--3">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
-            <div class="demo-render"><SectionHeader eyebrow="Platform" title="Designed for complex public and enterprise interfaces" description="Theme-aware, responsive, accessible, and server-rendered." align="left" size="large" headingLevel="2" maxWidth="full" class="showcase-instance showcase-instance--3" /></div>
-          </div>
-          <section class="demo-code" aria-label="Large editorial header usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;SectionHeader
-  eyebrow="Platform"
-  title="Designed for complex public and enterprise interfaces"
-  description="Theme-aware, responsive, accessible, and server-rendered."
-  size="large"
-  maxWidth="full"&gt;
-  &lt;div data-slot="icon"&gt;
-    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div data-slot="actions"&gt;
-    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/SectionHeader&gt;</code></pre>
-          </section>
-        </div>
-      </article></div></section>
-        
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>headingLevel</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"3xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
-      </main>
-      <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#section-header-demo-1">Left-aligned section header</a><a href="#section-header-demo-2">Centered section header</a><a href="#section-header-demo-3">Large editorial header</a><a href="#api">Props API</a></div>
-      </aside>
-    </div>
-    <nav class="detail-pagination">
-      <a href="/components/section"><small>Previous</small><strong>← Section</strong></a>
-      <a href="/components/typography"><small>Next</small><strong>Typography →</strong></a>
-    </nav>
-  }
-}

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

@@ -130,8 +130,8 @@ page SectionDetail {
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/public-page-shell"><small>Previous</small><strong>← Public Page Shell</strong></a>
-      <a href="/components/section-header"><small>Next</small><strong>Section Header →</strong></a>
+      <a href="/components/link"><small>Previous</small><strong>← Link</strong></a>
+      <a href="/components/typography"><small>Next</small><strong>Typography →</strong></a>
     </nav>
   }
 }

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

@@ -8,6 +8,8 @@ page SidebarDetail {
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
   state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Sidebar"
   state playground_drawerTitle = ctx.url.searchParams.get("pg_drawerTitle") ?? "Sidebar example"
+  state playground_mobile = (ctx.url.searchParams.get("pg_mobile") ?? "true") === "true"
+  state playground_drawerPlacement = ctx.url.searchParams.get("pg_drawerPlacement") ?? "left"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Sidebar"
@@ -22,7 +24,7 @@ page SidebarDetail {
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Sidebar</h1>
         <p>Theme-aware, responsive sidebar component.</p>
-        <div class="detail-badges"><span>8 props</span><span>2 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>10 props</span><span>2 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -31,130 +33,135 @@ page SidebarDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Sidebar color='{playground_color}' size='{playground_size}' label='{playground_label}' items='{playground_items}' active='{playground_active}' mobileLabel='{playground_mobileLabel}' drawerTitle='{playground_drawerTitle}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Sidebar color='{playground_color}' size='{playground_size}' label='{playground_label}' items='{playground_items}' active='{playground_active}' mobileLabel='{playground_mobileLabel}' drawerTitle='{playground_drawerTitle}' mobile='{playground_mobile}' drawerPlacement='{playground_drawerPlacement}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Sidebar
-  items='[
-    <span>&#123;</span>
-      "id": "sidebar-0-1",
-      "key": "sidebar-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#sidebar-demo",
-      "actionHref": "#sidebar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "id": "sidebar-0-2",
-      "key": "sidebar-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#sidebar-demo",
-      "actionHref": "#sidebar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        <span>&#123;</span>
-          "label": "Nested option A",
-          "value": "nested-a"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Nested option B",
-          "value": "nested-b"
-        <span>&#125;</span>
-      ],
-      "links": [
-        <span>&#123;</span>
-          "label": "Documentation",
-          "href": "#documentation"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "API reference",
-          "href": "#api-reference"
-        <span>&#125;</span>
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    <span>&#125;</span>
-  ]'
-  mobileLabel="Sidebar"
-  drawerTitle="Sidebar example"&gt;
-  &lt;div data-slot="drawer"&gt;
-    &lt;div class="showcase-slot"&gt;drawer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Sidebar&gt;</code></pre>
+            <pre><code data-playground-code>page SidebarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "sidebar-0-1",
+    "key": "sidebar-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#sidebar-demo",
+    "actionHref": "#sidebar-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "id": "sidebar-0-2",
+    "key": "sidebar-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#sidebar-demo",
+    "actionHref": "#sidebar-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      <span>&#123;</span>
+        "label": "Nested option A",
+        "value": "nested-a"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Nested option B",
+        "value": "nested-b"
+      <span>&#125;</span>
+    ],
+    "links": [
+      <span>&#123;</span>
+        "label": "Documentation",
+        "href": "#documentation"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "API reference",
+        "href": "#api-reference"
+      <span>&#125;</span>
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Sidebar
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      mobileLabel="Sidebar"
+      drawerTitle="Sidebar example"&gt;
+      &lt;div data-slot="drawer"&gt;
+        &lt;div class="showcase-slot"&gt;drawer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Sidebar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
           <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   &#123;
     "id": "sidebar-0-1",
@@ -262,7 +269,7 @@ page SidebarDetail {
       "Standard"
     ]
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-sidebar-mobileLabel" name="pg_mobileLabel" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-drawerTitle"><span><strong>drawer Title</strong><small>string</small></span><input id="playground-sidebar-drawerTitle" name="pg_drawerTitle" type="text" value="Sidebar example" /></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-sidebar-mobileLabel" name="pg_mobileLabel" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-drawerTitle"><span><strong>drawer Title</strong><small>string</small></span><input id="playground-sidebar-drawerTitle" name="pg_drawerTitle" type="text" value="Sidebar example" /></label><label class="playground-toggle" for="playground-sidebar-mobile"><span><strong>mobile</strong><small>boolean</small></span><input id="playground-sidebar-mobile" name="pg_mobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-sidebar-drawerPlacement"><span><strong>drawer Placement</strong><small>string</small></span><input id="playground-sidebar-drawerPlacement" name="pg_drawerPlacement" type="text" value="left" /></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -278,65 +285,70 @@ page SidebarDetail {
           <div id="sidebar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" mobile="true" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Groups and nested levels usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Sidebar
-  label="Workspace"
-  items='[
-    <span>&#123;</span>
-      "label": "Dashboard",
-      "href": "/",
-      "value": "dash",
-      "icon": "icon-[lucide--gauge]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "heading": "Projects",
-      "items": [
-        <span>&#123;</span>
-          "label": "Active",
-          "href": "/active",
-          "value": "active",
-          "badge": "4"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Archive",
-          "value": "archive",
-          "items": [
-            <span>&#123;</span>
-              "label": "2025",
-              "href": "/a/2025",
-              "value": "a2025"
-            <span>&#125;</span>,
-            <span>&#123;</span>
-              "label": "2024",
-              "href": "/a/2024",
-              "value": "a2024"
-            <span>&#125;</span>
-          ]
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "heading": "Account",
-      "items": [
-        <span>&#123;</span>
-          "label": "Settings",
-          "href": "/settings",
-          "value": "settings",
-          "icon": "icon-[lucide--settings]"
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>
-  ]'
-  active="active"
-  mobileLabel="Sidebar"
-  drawerTitle="Sidebar example"&gt;
-  &lt;div data-slot="drawer"&gt;
-    &lt;div class="showcase-slot"&gt;drawer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Sidebar&gt;</code></pre>
+            <pre><code>page SidebarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Dashboard",
+    "href": "/",
+    "value": "dash",
+    "icon": "icon-[lucide--gauge]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "heading": "Projects",
+    "items": [
+      <span>&#123;</span>
+        "label": "Active",
+        "href": "/active",
+        "value": "active",
+        "badge": "4"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Archive",
+        "value": "archive",
+        "items": [
+          <span>&#123;</span>
+            "label": "2025",
+            "href": "/a/2025",
+            "value": "a2025"
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "2024",
+            "href": "/a/2024",
+            "value": "a2024"
+          <span>&#125;</span>
+        ]
+      <span>&#125;</span>
+    ]
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "heading": "Account",
+    "items": [
+      <span>&#123;</span>
+        "label": "Settings",
+        "href": "/settings",
+        "value": "settings",
+        "icon": "icon-[lucide--settings]"
+      <span>&#125;</span>
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Sidebar
+      label="Workspace"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="active"
+      mobileLabel="Sidebar"
+      drawerTitle="Sidebar example"&gt;
+      &lt;div data-slot="drawer"&gt;
+        &lt;div class="showcase-slot"&gt;drawer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Sidebar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -349,33 +361,38 @@ page SidebarDetail {
           <div id="sidebar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Sidebar size="sm" label="Operations" items='[{"label":"Queue","href":"/queue","value":"queue","icon":"icon-[lucide--inbox]"},{"label":"Reports","href":"/reports","value":"reports","icon":"icon-[lucide--chart-no-axes-column]"}]' active="queue" mobileLabel="Open navigation" drawerTitle="Operations" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Sidebar size="sm" label="Operations" items='[{"label":"Queue","href":"/queue","value":"queue","icon":"icon-[lucide--inbox]"},{"label":"Reports","href":"/reports","value":"reports","icon":"icon-[lucide--chart-no-axes-column]"}]' active="queue" mobileLabel="Open navigation" drawerTitle="Operations" mobile="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Drawer on small screens usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Sidebar
-  size="sm"
-  label="Operations"
-  items='[
-    <span>&#123;</span>
-      "label": "Queue",
-      "href": "/queue",
-      "value": "queue",
-      "icon": "icon-[lucide--inbox]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Reports",
-      "href": "/reports",
-      "value": "reports",
-      "icon": "icon-[lucide--chart-no-axes-column]"
-    <span>&#125;</span>
-  ]'
-  active="queue"
-  drawerTitle="Operations"&gt;
-  &lt;div data-slot="drawer"&gt;
-    &lt;div class="showcase-slot"&gt;drawer slot&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/Sidebar&gt;</code></pre>
+            <pre><code>page SidebarExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Queue",
+    "href": "/queue",
+    "value": "queue",
+    "icon": "icon-[lucide--inbox]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Reports",
+    "href": "/reports",
+    "value": "reports",
+    "icon": "icon-[lucide--chart-no-axes-column]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Sidebar
+      size="sm"
+      label="Operations"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="queue"
+      drawerTitle="Operations"&gt;
+      &lt;div data-slot="drawer"&gt;
+        &lt;div class="showcase-slot"&gt;drawer slot&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/Sidebar&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>
@@ -403,7 +420,7 @@ if (component) registerOutputHandler(component, "close", (payload) =&gt; <span>&
 if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
   console.log("select", payload)
 <span>&#125;</span>)</code></pre></section></div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Open navigation"</code></td><td>No</td></tr><tr><td><code>drawerTitle</code></td><td>string</td><td><code>"Navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Open navigation"</code></td><td>No</td></tr><tr><td><code>drawerTitle</code></td><td>string</td><td><code>"Navigation"</code></td><td>No</td></tr><tr><td><code>mobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>drawerPlacement</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#sidebar-demo-1">Groups and nested levels</a><a href="#sidebar-demo-2">Drawer on small screens</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>