Pre Release New Changes

APPLY_COMPONENT_SHOWCASE_UPDATE.ps1

@@ -0,0 +1,109 @@
+param(
+  [string]$Root = "E:\WireJS",
+  [switch]$SkipValidation
+)
+
+$ErrorActionPreference = "Stop"
+$PackageRoot = Split-Path -Parent $MyInvocation.MyCommand.Path
+$Root = [System.IO.Path]::GetFullPath($Root)
+
+if (-not (Test-Path (Join-Path $Root "packages\ui\components"))) {
+  throw "WRNexusJS repository was not found at: $Root"
+}
+
+$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
+$backupRoot = Join-Path $Root ".wrnexus\component-showcase-backup-$timestamp"
+New-Item -ItemType Directory -Path $backupRoot -Force | Out-Null
+
+$files = @(
+  "scripts/generate-ui-component-reference.mjs",
+  "packages/ui/component-catalog.json",
+  "examples/component-showcase/scripts/generate-showcase.mjs",
+  "examples/component-showcase/scripts/showcase-profiles.mjs",
+  "examples/component-showcase/public/playground.js",
+  "examples/component-showcase/app/styles/global.css",
+  "examples/component-showcase/test/showcase.test.ts",
+  "examples/component-showcase/README.md"
+)
+
+$generatedFiles = @(
+  "packages/ui/component-reference.json",
+  "packages/ui/COMPONENTS.md",
+  "examples/component-showcase/showcase-manifest.json"
+)
+
+function Convert-RelativePath([string]$relative) {
+  return $relative.Replace("/", [System.IO.Path]::DirectorySeparatorChar)
+}
+
+function Backup-Path([string]$relative) {
+  $platformPath = Convert-RelativePath $relative
+  $source = Join-Path $Root $platformPath
+  if (-not (Test-Path $source)) { return }
+
+  $destination = Join-Path $backupRoot $platformPath
+  $destinationParent = Split-Path -Parent $destination
+  New-Item -ItemType Directory -Path $destinationParent -Force | Out-Null
+  Copy-Item $source $destination -Recurse -Force
+}
+
+foreach ($relative in $files) { Backup-Path $relative }
+foreach ($relative in $generatedFiles) { Backup-Path $relative }
+Backup-Path "examples/component-showcase/app/pages"
+Backup-Path "examples/component-showcase/app/layouts"
+
+foreach ($relative in $files) {
+  $platformPath = Convert-RelativePath $relative
+  $source = Join-Path $PackageRoot $platformPath
+  $destination = Join-Path $Root $platformPath
+  if (-not (Test-Path $source)) {
+    throw "Patch file is missing: $source"
+  }
+  New-Item -ItemType Directory -Path (Split-Path -Parent $destination) -Force | Out-Null
+  Copy-Item $source $destination -Force
+  Write-Host "Updated $relative" -ForegroundColor Green
+}
+
+function Invoke-BunStep {
+  param(
+    [string]$Label,
+    [string[]]$Arguments
+  )
+  Write-Host "`n$Label" -ForegroundColor Cyan
+  & bun @Arguments
+  if ($LASTEXITCODE -ne 0) {
+    throw "$Label failed with exit code $LASTEXITCODE."
+  }
+}
+
+Push-Location $Root
+try {
+  Invoke-BunStep "Generating the current UI component reference" @(
+    "run",
+    "scripts/generate-ui-component-reference.mjs"
+  )
+
+  $showcaseRoot = Join-Path $Root "examples\component-showcase"
+  Remove-Item (Join-Path $showcaseRoot ".wrnexus") -Recurse -Force -ErrorAction SilentlyContinue
+  Remove-Item (Join-Path $showcaseRoot "dist") -Recurse -Force -ErrorAction SilentlyContinue
+
+  Push-Location $showcaseRoot
+  try {
+    Invoke-BunStep "Generating component showcase pages and manifest" @("run", "generate")
+    if (-not $SkipValidation) {
+      Invoke-BunStep "Validating the complete component showcase" @("run", "check")
+    }
+  }
+  finally {
+    Pop-Location
+  }
+}
+finally {
+  Pop-Location
+}
+
+Write-Host "`nComponent showcase update applied successfully." -ForegroundColor Green
+Write-Host "Backup: $backupRoot"
+if ($SkipValidation) {
+  Write-Host "Validation was skipped. Run: bun run --cwd examples/component-showcase check" -ForegroundColor Yellow
+}

APPLY_OVERLAY_REACTIVITY_FIX.ps1

@@ -0,0 +1,36 @@
+param(
+  [Parameter(Mandatory = $false)]
+  [string]$Root = "E:\WireJS"
+)
+
+$ErrorActionPreference = "Stop"
+$Root = (Resolve-Path $Root).Path
+$ScriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path
+
+Write-Host "Stopping Bun processes..." -ForegroundColor Cyan
+Get-Process bun -ErrorAction SilentlyContinue | Stop-Process -Force
+
+Write-Host "Applying overlay reactivity fix..." -ForegroundColor Cyan
+node (Join-Path $ScriptDir "patch-overlay-showcase.mjs") $Root
+
+Push-Location $Root
+try {
+  Write-Host "Regenerating UI component reference..." -ForegroundColor Cyan
+  bun run scripts/generate-ui-component-reference.mjs
+
+  Write-Host "Running focused UI tests..." -ForegroundColor Cyan
+  bun test packages/ui/test/overlay-reactivity.test.ts
+
+  Push-Location (Join-Path $Root "examples\component-showcase")
+  try {
+    Write-Host "Regenerating showcase..." -ForegroundColor Cyan
+    bun run generate
+    bun test test/showcase.test.ts
+  } finally {
+    Pop-Location
+  }
+} finally {
+  Pop-Location
+}
+
+Write-Host "Done. Start with: cd E:\WireJS\examples\component-showcase; bun run dev" -ForegroundColor Green

PATCH_MANIFEST.json

@@ -0,0 +1,23 @@
+{
+  "name": "WRNexusJS component showcase complete update",
+  "scope": "examples/component-showcase and UI catalog generation",
+  "files": [
+    "scripts/generate-ui-component-reference.mjs",
+    "packages/ui/component-catalog.json",
+    "examples/component-showcase/scripts/generate-showcase.mjs",
+    "examples/component-showcase/scripts/showcase-profiles.mjs",
+    "examples/component-showcase/public/playground.js",
+    "examples/component-showcase/app/styles/global.css",
+    "examples/component-showcase/test/showcase.test.ts",
+    "examples/component-showcase/README.md"
+  ],
+  "generatedAfterApply": [
+    "packages/ui/component-reference.json",
+    "packages/ui/COMPONENTS.md",
+    "examples/component-showcase/showcase-manifest.json",
+    "examples/component-showcase/app/layouts/showcase.wrn",
+    "examples/component-showcase/app/layouts/document.wrn",
+    "examples/component-showcase/app/pages/*.wrn",
+    "examples/component-showcase/app/pages/components/*.wrn"
+  ]
+}

README.md

@@ -1,39 +1,9 @@
-# WRNexusJS
+# WRNexus overlay reactivity and event-log fix
 
-WRNexusJS is an SSR-first, Bun-powered full-stack framework with a dedicated `.wrn` language, server rendering, selective client reactivity, file-based routing, database tooling, realtime communication, UI components, mobile support, and framework-native system packages.
+This patch updates ContextMenu, Drawer, Dropdown, Modal, Popover, and Tooltip.
 
-## WRNexusJS 0.4.0
+The click/hover/right-click handlers were running and public events were emitted, but the visible DOM bindings depended on `isOpen()` helper calls. The updated component markup binds `data-open`, `data-show`, `aria-expanded`, and `aria-describedby` directly to `open || visible` so the reactive runtime subscribes to the exact state values controlling the overlay.
 
-Version 0.4 introduces a package contribution platform. Installed `@wrnexus/*` systems can now register components, page/API/realtime routes, middleware, browser runtimes, static assets, Tailwind scan sources, database migrations, CLI inspection data, and DevToolbar panels.
+The showcase event examples now log an event name plus a safe empty object when an event has no detail. Console output such as `open undefined` is debug output, not a thrown exception.
 
-A package-owned browser runtime is injected only when rendered markup asks for it:
-
-```wrn
-<Captcha type="alphanumeric" action="contact-submit" />
-```
-
-`@wrnexus/captcha` marks its output with `data-wrnexus-runtime="captcha"`. WRNexusJS then serves or bundles the package runtime and adds the correct script to the response. Applications no longer copy `captcha.js`, add script tags, or duplicate `Captcha.wrn` inside `@wrnexus/ui`.
-
-## Development
-
-```bash
-bun install
-bun run verify:0.4
-bun run validate:0.4
-```
-
-The complete validation command runs framework typechecking, linting, package tests, formatting checks, integration tests, example tests/builds, CAPTCHA showcase checks, and managed CAPTCHA service tests.
-
-## Main packages
-
-The monorepo contains 30 framework packages covering the language/compiler, SSR/CSR, routing, server runtime, plugins, database access, queues, PubSub, uploads, validation, security, UI, mobile/native capabilities, AI, tracking, testing, and CAPTCHA.
-
-Read:
-
-- `docs/ARCHITECTURE-0.4.md`
-- `docs/PACKAGE-RUNTIMES-0.4.md`
-- `docs/PACKAGE-UPGRADES-0.4.md`
-- `docs/UPGRADE-0.4.md`
-- `docs/TEST-CHECKLIST-0.4.md`
-- `packages/captcha/README.md`
-- `CHANGELOG-0.4.0.md`
+The red `Permissions policy violation: unload ... chext_driver.js` message comes from a browser extension/content script and is unrelated to WRNexusJS.

README_APPLY.md

@@ -0,0 +1,119 @@
+# WRNexusJS component showcase complete update
+
+This patch upgrades `examples/component-showcase` so the showcase follows the
+current `@wrnexus/ui` source automatically and documents the new and recently
+repaired components through real detail-page examples.
+
+## Apply
+
+From the extracted patch directory:
+
+```powershell
+powershell `
+  -ExecutionPolicy Bypass `
+  -File ".\APPLY_COMPONENT_SHOWCASE_UPDATE.ps1" `
+  -Root "E:\WireJS"
+```
+
+The script backs up replaced source files, the generated component reference,
+the generated pages, layouts, and showcase manifest under:
+
+```text
+E:\WireJS\.wrnexus\component-showcase-backup-<timestamp>
+```
+
+It then regenerates the current UI reference, regenerates every showcase page,
+and runs the component showcase check. Use `-SkipValidation` only when you need
+to copy and generate first and validate manually afterward.
+
+## Main changes
+
+### Complete dynamic catalog
+
+- Generates one detail page for every unique component declaration.
+- Deduplicates legacy lowercase component files in the reference generator and
+  prefers the canonical `<ComponentName>.wrn` source.
+- Uses only explicitly declared `@event ... = function` entries as the public
+  event contract.
+- Generates `showcase-manifest.json` with component, category, demo, prop, slot,
+  event, and profile coverage.
+
+### Component-specific examples
+
+`scripts/showcase-profiles.mjs` contains production use cases for the new and
+recently repaired components, including:
+
+- PublicPageShell, Section, SectionHeader, MarketingSectionHeader
+- AnnouncementBar, Breadcrumb, PageHeader, TextLink
+- Hero, HeroActions, SplitHero
+- FeatureGrid, FeatureCard, FeatureIconCard
+- MetricGrid, MetricCard, StatsBar
+- CTASection, BackToTop, Footer
+- ContextMenu, Drawer, Dropdown, Modal, Popover, Tooltip
+- Container, Grid, Columns, Card, Link, Image, SearchBox, Map, List, Marquee,
+  Tabs, Timeline, Typography, and Divider
+
+Every other catalog component keeps responsive generated baseline examples.
+
+### Correct WRN source generation
+
+- Uses public component tags such as `<MetricGrid />` instead of legacy mounts.
+- Self-closes components without slots and uses paired tags only when content is
+  present.
+- Uses `data-slot="..."` for named WRNexusJS slots.
+- Uses single-quoted dynamic WRN expressions in playground previews.
+- Safely serializes arrays and objects without breaking on apostrophes in data
+  or data URLs.
+
+### Typed playground
+
+- Boolean controls preserve explicit `true` and `false` values.
+- Number controls remain numbers.
+- Array and object controls are validated JSON and remain structured values.
+- Free-form props such as icons, labels, IDs, and URLs remain text inputs.
+- Enum controls come from explicit public showcase profiles rather than source
+  comparisons, preventing false VS Code-style restrictions.
+- Preview replacement uses `replaceChildren`, rehydrates WRN scopes, rebinds the
+  theme runtime, and never uses unsafe `innerHTML`.
+- Interactive components display live `event.detail` output.
+
+### Responsive detail pages
+
+The showcase stylesheet now gives shell, hero, grid, statistics, CTA, footer,
+and overlay components the correct preview width and height. In particular,
+MetricGrid and FeatureGrid use the complete available stage instead of being
+compressed into narrow cards.
+
+### Event documentation
+
+Every component with declared public events receives:
+
+- a complete event list
+- declarative `.wrn` handler examples
+- browser `addEventListener` examples
+- live event output in the playground
+
+### Tests
+
+The test suite is manifest-driven rather than using hardcoded component or demo
+counts. It verifies generated coverage, typed playground behavior, safe source
+syntax, profile coverage, event documentation, responsive stages, specialized
+form examples, and compilation of every generated page.
+
+## Manual commands
+
+```powershell
+cd E:\WireJS
+bun run scripts/generate-ui-component-reference.mjs
+
+cd E:\WireJS\examples\component-showcase
+bun run generate
+bun run test
+bun run build
+```
+
+For the complete example validation:
+
+```powershell
+bun run check
+```

VALIDATION.md

@@ -0,0 +1,30 @@
+# Validation performed in the artifact environment
+
+Validated on 2026-07-31 against the available repository snapshot plus the
+latest component replacements from this conversation.
+
+Passed:
+
+- Node syntax validation for both generator scripts and the browser playground
+- dynamic component-reference parsing and showcase generation
+- manifest/detail/event consistency checks for every unique component present in
+  the artifact snapshot
+- generation of category pages, detail pages, typed playgrounds, public event
+  documentation, and component-specific use cases
+- compilation of all 127 generated `.wrn` pages in the artifact snapshot using
+  the available WRNexusJS compiler build
+- safe public component tags, self-closing behavior, named `data-slot` markup,
+  single-quoted dynamic expressions, and apostrophe-safe structured props
+
+The artifact snapshot is older than the user's current working repository, so
+its unique component count is not used as a release expectation. The patch has
+no hardcoded component count: applying it regenerates the current reference and
+all pages from the user's live `packages/ui/components` directory.
+
+Bun is not installed in the artifact execution environment. The apply script
+therefore runs the authoritative local commands on the user's Windows checkout:
+
+```text
+bun run scripts/generate-ui-component-reference.mjs
+bun run --cwd examples/component-showcase check
+```

bun.lock

@@ -38,10 +38,13 @@
       "dependencies": {
         "@wrnexus/core": "workspace:*",
         "@wrnexus/db": "workspace:*",
+        "@wrnexus/ui": "workspace:*",
         "@wrnexus/validation": "workspace:*",
       },
       "devDependencies": {
         "@eslint/js": "latest",
+        "@iconify-json/lucide": "^1.2.118",
+        "@iconify/tailwind4": "^1.2.3",
         "@tailwindcss/cli": "^4.0.0",
         "@wrnexus/test": "workspace:*",
         "eslint": "latest",
@@ -83,11 +86,11 @@
     },
     "packages/ai": {
       "name": "@wrnexus/ai",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/auth": {
       "name": "@wrnexus/auth",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/authz": "workspace:*",
         "@wrnexus/captcha": "workspace:*",
@@ -109,11 +112,11 @@
     },
     "packages/authz": {
       "name": "@wrnexus/authz",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/captcha": {
       "name": "@wrnexus/captcha",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
         "@wrnexus/plugin": "workspace:*",
@@ -127,7 +130,7 @@
     },
     "packages/cli": {
       "name": "@wrnexus/cli",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "bin": {
         "wrnexus": "src/index.ts",
       },
@@ -148,29 +151,29 @@
     },
     "packages/compiler": {
       "name": "@wrnexus/compiler",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/syntax": "workspace:*",
       },
     },
     "packages/core": {
       "name": "@wrnexus/core",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/csr": {
       "name": "@wrnexus/csr",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
     },
     "packages/db": {
       "name": "@wrnexus/db",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/dev-server": {
       "name": "@wrnexus/dev-server",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/compiler": "workspace:*",
         "@wrnexus/core": "workspace:*",
@@ -190,7 +193,7 @@
     },
     "packages/dev-toolbar": {
       "name": "@wrnexus/dev-toolbar",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "devDependencies": {
         "@types/bun": "latest",
         "typescript": "^5.9.2",
@@ -198,63 +201,63 @@
     },
     "packages/encryption": {
       "name": "@wrnexus/encryption",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/helpers": {
       "name": "@wrnexus/helpers",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
     },
     "packages/i18n": {
       "name": "@wrnexus/i18n",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
     },
     "packages/jwt": {
       "name": "@wrnexus/jwt",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/mobile": {
       "name": "@wrnexus/mobile",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/native": "workspace:*",
       },
     },
     "packages/native": {
       "name": "@wrnexus/native",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/oauth": {
       "name": "@wrnexus/oauth",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/plugin": {
       "name": "@wrnexus/plugin",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/syntax": "workspace:*",
       },
     },
     "packages/pubsub": {
       "name": "@wrnexus/pubsub",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/queue": {
       "name": "@wrnexus/queue",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/reactive": {
       "name": "@wrnexus/reactive",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/router": {
       "name": "@wrnexus/router",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/compiler": "workspace:*",
         "@wrnexus/core": "workspace:*",
@@ -262,14 +265,14 @@
     },
     "packages/ssr": {
       "name": "@wrnexus/ssr",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
     },
     "packages/styles": {
       "name": "@wrnexus/styles",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
         "@wrnexus/plugin": "workspace:*",
@@ -278,33 +281,33 @@
     },
     "packages/syntax": {
       "name": "@wrnexus/syntax",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/test": {
       "name": "@wrnexus/test",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/tracking": {
       "name": "@wrnexus/tracking",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
     },
     "packages/uploader": {
       "name": "@wrnexus/uploader",
-      "version": "0.5.10",
+      "version": "0.5.14",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
     },
     "packages/validation": {
       "name": "@wrnexus/validation",
-      "version": "0.5.10",
+      "version": "0.5.14",
     },
     "services/managed-captcha": {
       "name": "@wrnexus/managed-captcha-service",
@@ -948,9 +951,9 @@
 
     "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
-    "basic-app/eslint": ["eslint@10.7.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.6.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.2", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.4", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-GVTD7s1vdIl6UYvAfriOPeY1Df8LIZjfofLvHwde+erDHGGuHyuM6xoxRxmHiebhYuD2p1vN4wWh0XzPARSGDQ=="],
+    "basic-app/eslint": ["eslint@10.8.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.2", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-nuKKvN+oIBO0koN7Tm7dlkmnkc21mtt0QJLwAKzjLq14y6lRTdVG36MZHJ8eQHwdJMwZbQNMlPOYedMq/oVJvQ=="],
 
-    "basic-app/typescript-eslint": ["typescript-eslint@8.63.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.63.0", "@typescript-eslint/parser": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0", "@typescript-eslint/utils": "8.63.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-xgwXyzG4sK9ALkBxbyGkTMMOS+imnW65iPhxCQMK83KhxyoDNW7l+IDqEf9vMdoUidHpOoS967RCq4eMiTexwQ=="],
+    "basic-app/typescript-eslint": ["typescript-eslint@8.65.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.65.0", "@typescript-eslint/parser": "8.65.0", "@typescript-eslint/typescript-estree": "8.65.0", "@typescript-eslint/utils": "8.65.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-/ggrHAwyjENDusvyxbuqxAC2dTnZg/Z8F+fgQtYIz+L6n/9HfSlEZcFGV/NsMNa6CkGk0xUjUAFwC0vHOflvIA=="],
 
     "component-showcase/@iconify-json/lucide": ["@iconify-json/lucide@1.2.118", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-JBnK4YOq6K/lA0JP//27QxFxJ4120TjvfXAzGZZIGjCcXcRRRFxl1rcV7+IWdcVCe90KXdqVaAwLaLf6G3HELw=="],
 
@@ -964,48 +967,50 @@
 
     "svgo/commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.63.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.63.0", "@typescript-eslint/type-utils": "8.63.0", "@typescript-eslint/utils": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.63.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-rvwSgqT+DHpWdzfSzPatRLm02a0GlESt++9iy3hLCDY4BgkaLcl8LBi9Yh7XGFBpwcBE/K3024QuXWTpbz4FfQ=="],
+    "basic-app/eslint/@eslint/config-helpers": ["@eslint/config-helpers@0.7.0", "", { "dependencies": { "@eslint/core": "^1.2.1" } }, "sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/parser": ["@typescript-eslint/parser@8.63.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.63.0", "@typescript-eslint/types": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-gwh4gvvlaVDKKxyfxMG+Gnu1u9X0OQBwyGLkbwB65dIzBKnxeRiJlNFqlI3zwVhNXJIs6qV7mlFCn/BIajlVig=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.65.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.65.0", "@typescript-eslint/type-utils": "8.65.0", "@typescript-eslint/utils": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.65.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-IEgob78X12rHpUmtcwFsXhZdVGJtwTVP8FiCLZkR6GlYVrl2PcuB+KhCE5BlVC/eQpQnu8WXRtkHZuPar+gCRA=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.63.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.63.0", "@typescript-eslint/tsconfig-utils": "8.63.0", "@typescript-eslint/types": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0", "debug": "^4.4.3", "minimatch": "^10.2.2", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-ygBkU+B7ex5UI/gKhaqexWev79uISfIv7XQCRNYO/jmD8rGLPyWLAb3KMRT6nd8Gt9bmUBi9+iX6tBdYfOY81Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/parser": ["@typescript-eslint/parser@8.65.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.65.0", "@typescript-eslint/types": "8.65.0", "@typescript-eslint/typescript-estree": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-CZ4nMxWwgu1HEEFNkeaCptra9QCtkmKdgf3sWh1rl1trIhmxLilgTV4cwcbQ4wemnT4sWQN8CaKOmdYx+g2gMA=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/utils": ["@typescript-eslint/utils@8.63.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.63.0", "@typescript-eslint/types": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA=="],
+    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.65.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.65.0", "@typescript-eslint/tsconfig-utils": "8.65.0", "@typescript-eslint/types": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0", "debug": "^4.4.3", "minimatch": "^10.2.2", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-JboAE2swaYt4tb1fHhHTABE2K+OLy09XfcTbhnk4Pw96f9dd2e9iYsJ28gBggHlo5z5x1rkyWvcPoTuNTd4oGg=="],
+
+    "basic-app/typescript-eslint/@typescript-eslint/utils": ["@typescript-eslint/utils@8.65.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.65.0", "@typescript-eslint/types": "8.65.0", "@typescript-eslint/typescript-estree": "8.65.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-gXiwIHsYreboxeJucHKPvgwl7dXt50mF8s1/c00cP/WoVTyWKFdtfhRWwZiXYFU5H2O8vVoSLNrexFZjYS/SGA=="],
 
     "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0" } }, "sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0" } }, "sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0", "@typescript-eslint/utils": "8.63.0", "debug": "^4.4.3", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-Nzzh/OGxVCOjObjaj1CQF2RUasyYy2Jfuh+zZ3PjLzG2fYRriAiZLib9UKtO+CpQAS3YHiAS+ckZDclwqI1TPA=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "@typescript-eslint/typescript-estree": "8.65.0", "@typescript-eslint/utils": "8.65.0", "debug": "^4.4.3", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-YjaZ7PRI5qY7ax2L3PbvX0rRyGtipAReCWs0mhhDBHjH/vl0g0BonaGXrKdKpMbIIsMIwDgbk/xzkBTyAltS5g=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A=="],
 
     "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/parser/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0" } }, "sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A=="],
+    "basic-app/typescript-eslint/@typescript-eslint/parser/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0" } }, "sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/parser/@typescript-eslint/types": ["@typescript-eslint/types@8.63.0", "", {}, "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/parser/@typescript-eslint/types": ["@typescript-eslint/types@8.65.0", "", {}, "sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/parser/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw=="],
+    "basic-app/typescript-eslint/@typescript-eslint/parser/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.63.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.63.0", "@typescript-eslint/types": "^8.63.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-e5dh0/UI0ok53AlZ5wRkXCB32z/f2jUZqPR/ygAw5WYaSw8j9EoJWlS7wQjr/dmOaqWjnPIn2m+HhVPCMWGZVQ=="],
+    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.65.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.65.0", "@typescript-eslint/types": "^8.65.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-SxnPhbTsGahizDgbu7oqFH/xVtzIqMd/s+WtnSxNxJZJpLbdT5IPdzg8EZxO3+PoKahXmwJLeNQOpKJb3/bi7Q=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.63.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-sUAbkulqBAsncKnbRP3+7CtQFRKicexnj7ZwNC6ddCR7EmrXvjvdCYMJbUIqMd6lwoEriZjwLo08aS5tSjVMHg=="],
+    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.65.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-j6GzGqCiRdA7Qhur2VVmKZAkBLfnHFQfx4TaJGL9RMveZqCo48jSHHO0DTgizEnGhtWnqmbtCUSrqSkdiY/0Hg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/types": ["@typescript-eslint/types@8.63.0", "", {}, "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/types": ["@typescript-eslint/types@8.65.0", "", {}, "sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw=="],
+    "basic-app/typescript-eslint/@typescript-eslint/typescript-estree/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/utils/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0" } }, "sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A=="],
+    "basic-app/typescript-eslint/@typescript-eslint/utils/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0" } }, "sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.63.0", "", {}, "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.65.0", "", {}, "sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager/@typescript-eslint/types": ["@typescript-eslint/types@8.63.0", "", {}, "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager/@typescript-eslint/types": ["@typescript-eslint/types@8.65.0", "", {}, "sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/type-utils/@typescript-eslint/types": ["@typescript-eslint/types@8.63.0", "", {}, "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/type-utils/@typescript-eslint/types": ["@typescript-eslint/types@8.65.0", "", {}, "sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/visitor-keys/@typescript-eslint/types": ["@typescript-eslint/types@8.63.0", "", {}, "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q=="],
+    "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/visitor-keys/@typescript-eslint/types": ["@typescript-eslint/types@8.65.0", "", {}, "sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg=="],
 
-    "basic-app/typescript-eslint/@typescript-eslint/utils/@typescript-eslint/scope-manager/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw=="],
+    "basic-app/typescript-eslint/@typescript-eslint/utils/@typescript-eslint/scope-manager/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A=="],
   }
 }

examples/basic-app/app/components/Modal.wrn

@@ -0,0 +1,121 @@
+component Modal {
+    props {
+        @event onConfirmed = function
+    }
+
+    state isOpen = false
+
+    functions {
+        function confirmed() {
+            isOpen = false; 
+            if(onConfirmed) {
+                onConfirmed()
+            }
+        }
+    }
+
+    view {
+        <main
+            class="flex min-h-screen items-center justify-center bg-[var(--wire-color-background)] p-6"
+        >
+            <button
+                type="button"
+                class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-3 font-semibold text-white shadow-lg transition hover:opacity-90"
+                @click="isOpen = true"
+            >
+                Open Transparent Modal
+            </button>
+
+            <div
+                class:hidden="isOpen == false"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 p-4 backdrop-blur-sm"
+            >
+                <div
+                    class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20"
+                >
+                    <div
+                        class="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-[var(--wire-color-primary)]/30 blur-3xl"
+                    >
+                    </div>
+
+                    <div
+                        class="pointer-events-none absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-cyan-500/20 blur-3xl"
+                    >
+                    </div>
+
+                    <div
+                        class="relative z-10"
+                    >
+                        <div
+                            class="mb-6 flex items-start justify-between gap-4"
+                        >
+                            <div>
+                                <p
+                                    class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--wire-color-primary)]"
+                                >
+                                    Transparent Modal
+                                </p>
+
+                                <h2
+                                    class="text-2xl font-bold text-[var(--wire-color-text)]"
+                                >
+                                    Welcome to WRNexusJS
+                                </h2>
+
+                                <p
+                                    class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted)]"
+                                >
+                                    This modal uses a transparent glass background with blur,
+                                    soft borders, and theme-aware colors.
+                                </p>
+                            </div>
+
+                            <button
+                                type="button"
+                                aria-label="Close modal"
+                                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xl text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
+                                @click="isOpen = false"
+                            >
+                                ×
+                            </button>
+                        </div>
+
+                        <div
+                            class="rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur-lg dark:border-white/10 dark:bg-black/10"
+                        >
+                            <p
+                                class="text-sm text-[var(--wire-color-text-muted)]"
+                            >
+                                You can place forms, confirmation messages, account details,
+                                images, or any other component inside this modal.
+                            </p>
+                        </div>
+
+                        <div
+                            class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+                        >
+                            <button
+                                type="button"
+                                class="rounded-xl border border-white/20 bg-white/10 px-5 py-2.5 font-medium text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
+                                @click="isOpen = false"
+                            >
+                                Cancel
+                            </button>
+
+                            <button
+                                type="button"
+                                class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 font-semibold text-white shadow-lg transition hover:opacity-90"
+                                @click="confirmed()"
+                            >
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    }
+
+    style {
+    }
+}

examples/basic-app/app/layouts/document.wrn

@@ -0,0 +1,26 @@
+// Global document layout. The framework renders this once around the selected
+// page layout and merges SEO metadata, styles, and scripts into <head>/<body>.
+// Request cookies, resolved theme, language, URL, and pathname are available
+// as SSR props, so document attributes do not need a client-side correction.
+layout Document {
+  props {
+    cookies = {}
+    theme = "light"
+    language = "en"
+    url = ""
+    pathname = "/"
+  }
+
+  view {
+    <html>
+      <head></head>
+      <body>
+        <div
+          id="app"
+        >
+          <slot />
+        </div>
+      </body>
+    </html>
+  }
+}

examples/basic-app/app/pages/modal.wrn

@@ -0,0 +1,14 @@
+page ModalPage {
+
+    functions {
+        function onConfirmed() {
+            alert("User Confirmed")
+        }
+    }
+
+    view {
+        <Modal
+            onConfirmed={onConfirmed}
+        />
+    }
+}

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

@@ -7,6 +7,7 @@
  * components are `.wrn`/`.tsx` files under app/. Paths are relative to this file.
  */
 @import "tailwindcss";
+@plugin "@iconify/tailwind4";
 @source "../**/*.wrn";
 @source "../**/*.tsx";
 
@@ -44,9 +45,7 @@ body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  max-width: var(--maxw);
   margin: 0 auto;
-  padding: 3rem 1.25rem;
 }
 
 h1 {

examples/basic-app/package.json

@@ -17,11 +17,14 @@
   "dependencies": {
     "@wrnexus/core": "workspace:*",
     "@wrnexus/validation": "workspace:*",
-    "@wrnexus/db": "workspace:*"
+    "@wrnexus/db": "workspace:*",
+    "@wrnexus/ui": "workspace:*"
   },
   "devDependencies": {
     "@wrnexus/test": "workspace:*",
     "@eslint/js": "latest",
+    "@iconify-json/lucide": "^1.2.118",
+    "@iconify/tailwind4": "^1.2.3",
     "@tailwindcss/cli": "^4.0.0",
     "eslint": "latest",
     "prettier": "^3.9.4",

examples/component-showcase/README.md

@@ -1,23 +1,71 @@
 # WRNexus UI component showcase
 
-This example renders every component from `@wrnexus/ui` with representative,
-prop-driven data. Pages are generated from `packages/ui/component-reference.json`
-so coverage stays synchronized with the packaged component catalog.
+The showcase is generated from `packages/ui/component-reference.json`. It stays
+synchronized with the current component source rather than maintaining a second
+hand-written catalog.
 
 ```bash
 bun run --cwd examples/component-showcase dev
 ```
 
-Open `http://localhost:3000`. The index links to the category catalog, and every
-component card opens a dedicated documentation page with three live use cases,
-usage examples, its prop API, events, slots, and related navigation.
+Open `http://localhost:3000`.
 
-After changing UI component props, regenerate and verify the catalog:
+## Detail-page coverage
+
+Every current UI component receives a dedicated detail page with:
+
+- an interactive server-rendered playground for every declared prop
+- typed boolean, number, array, and object controls
+- public component-tag syntax with single-quoted dynamic WRN expressions
+- component-specific production use cases when a profile exists
+- responsive fallback examples for every remaining component
+- copyable `.wrn` source beside every live preview
+- complete props, slots, and explicitly declared public events
+- live `event.detail` output for interactive components
+- previous and next component navigation
+
+The specialized profiles for new and recently repaired components live in:
+
+```text
+scripts/showcase-profiles.mjs
+```
+
+Update that file to add product-quality examples or public enum options. Do not
+infer allowed prop values from implementation comparisons; unrestricted values
+such as icon classes, labels, IDs, and URLs must remain free-form inputs.
+
+## Generated files
+
+The generator creates:
+
+```text
+app/layouts/showcase.wrn
+app/layouts/document.wrn
+app/pages/*.wrn
+app/pages/components/*.wrn
+showcase-manifest.json
+```
+
+`showcase-manifest.json` records component, category, demo, prop, slot, and event
+coverage and is used by the test suite. Do not hand-edit generated pages.
+
+## Validation
+
+After changing UI components, metadata, profiles, the playground, or showcase
+styles, run:
 
 ```bash
+bun run scripts/generate-ui-component-reference.mjs
 bun run --cwd examples/component-showcase generate
+bun run --cwd examples/component-showcase test
+bun run --cwd examples/component-showcase build
+```
+
+The complete local check is:
+
+```bash
 bun run --cwd examples/component-showcase check
 ```
 
-Files under `app/pages/` are generated. Customize the generator or stylesheet
-instead of editing those pages directly.
+Review representative component pages at mobile, tablet, and desktop widths and
+in light, dark, keyboard-only, and reduced-motion modes before publishing.

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="/blocks">Blocks</a><a href="/templates">Templates</a></nav>
+          <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>
           <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>
@@ -30,39 +30,47 @@ layout Showcase {
             
         <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"><span data-docs-component-name>Advanced Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/combo-box"><span data-docs-component-name>Combo Box</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/copy-markup"><span data-docs-component-name>Copy Markup</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/input-number"><span data-docs-component-name>Input Number</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/pin-input"><span data-docs-component-name>Pin Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/search-box"><span data-docs-component-name>Search Box</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/strong-password"><span data-docs-component-name>Strong Password</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/toggle-count"><span data-docs-component-name>Toggle Count</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/toggle-password"><span data-docs-component-name>Toggle Password</span><small data-component-status="complete">Complete</small></a></div>
+          <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/copy-markup">Copy Markup</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"><span data-docs-component-name>Accordion</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/alert"><span data-docs-component-name>Alert</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar"><span data-docs-component-name>Avatar</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar-group"><span data-docs-component-name>Avatar Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/badge"><span data-docs-component-name>Badge</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/blockquote"><span data-docs-component-name>Blockquote</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button"><span data-docs-component-name>Button</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button-group"><span data-docs-component-name>Button Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/card"><span data-docs-component-name>Card</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/carousel"><span data-docs-component-name>Carousel</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/chat-bubble"><span data-docs-component-name>Chat Bubble</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/collapse"><span data-docs-component-name>Collapse</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/date-picker"><span data-docs-component-name>Date Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/device-frame"><span data-docs-component-name>Device Frame</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-upload-progress"><span data-docs-component-name>File Upload Progress</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/hero-actions"><span data-docs-component-name>Hero Actions</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/legend-indicator"><span data-docs-component-name>Legend Indicator</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list"><span data-docs-component-name>List</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list-group"><span data-docs-component-name>List Group</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marquee"><span data-docs-component-name>Marquee</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/progress"><span data-docs-component-name>Progress</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/rating"><span data-docs-component-name>Rating</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/skeleton"><span data-docs-component-name>Skeleton</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/spinner"><span data-docs-component-name>Spinner</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/styled-icon"><span data-docs-component-name>Styled Icon</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/timeline"><span data-docs-component-name>Timeline</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast"><span data-docs-component-name>Toast</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tree-view"><span data-docs-component-name>Tree View</span><small data-component-status="pending">Pending</small></a></div>
+          <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/toast">Toast</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="/blocks">Blocks</a>
-          <div><a data-docs-component-link href="/components/announcement-bar"><span data-docs-component-name>Announcement Bar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/ctasection"><span data-docs-component-name>CTASection</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-card"><span data-docs-component-name>Feature Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-icon-card"><span data-docs-component-name>Feature Icon Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/hero"><span data-docs-component-name>Hero</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marketing-section-header"><span data-docs-component-name>Marketing Section Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/metric-card"><span data-docs-component-name>Metric Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/page-header"><span data-docs-component-name>Page Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/portal-dashboard"><span data-docs-component-name>Portal Dashboard</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/split-hero"><span data-docs-component-name>Split Hero</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stats-bar"><span data-docs-component-name>Stats Bar</span><small data-component-status="pending">Pending</small></a></div>
+          <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></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>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/forms">Forms</a>
-          <div><a data-docs-component-link href="/components/auth-form"><span data-docs-component-name>Auth Form</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/checkbox"><span data-docs-component-name>Checkbox</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/color-picker"><span data-docs-component-name>Color Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-input"><span data-docs-component-name>File Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input"><span data-docs-component-name>Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input-group"><span data-docs-component-name>Input Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/radio"><span data-docs-component-name>Radio</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/range-slider"><span data-docs-component-name>Range Slider</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/select"><span data-docs-component-name>Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/switch"><span data-docs-component-name>Switch</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/textarea"><span data-docs-component-name>Textarea</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/time-picker"><span data-docs-component-name>Time Picker</span><small data-component-status="complete">Complete</small></a></div>
+          <div><a data-docs-component-link href="/components/checkbox">Checkbox</a><a data-docs-component-link href="/components/color-picker">Color Picker</a><a data-docs-component-link href="/components/file-input">File Input</a><a data-docs-component-link href="/components/input">Input</a><a data-docs-component-link href="/components/input-group">Input Group</a><a data-docs-component-link href="/components/radio">Radio</a><a data-docs-component-link href="/components/range-slider">Range Slider</a><a data-docs-component-link href="/components/search-box">Search Box</a><a data-docs-component-link href="/components/select">Select</a><a data-docs-component-link href="/components/switch">Switch</a><a data-docs-component-link href="/components/textarea">Textarea</a><a data-docs-component-link href="/components/time-picker">Time Picker</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/integrations">Integrations</a>
-          <div><a data-docs-component-link href="/components/advanced-date-picker"><span data-docs-component-name>Advanced Date Picker</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/advanced-range-slider"><span data-docs-component-name>Advanced Range Slider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/chart"><span data-docs-component-name>Chart</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/clipboard"><span data-docs-component-name>Clipboard</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/confetti"><span data-docs-component-name>Confetti</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/data-map"><span data-docs-component-name>Data Map</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/data-table"><span data-docs-component-name>Data Table</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/drag-and-drop"><span data-docs-component-name>Drag And Drop</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/file-upload"><span data-docs-component-name>File Upload</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/map"><span data-docs-component-name>Map</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast-notifications"><span data-docs-component-name>Toast Notifications</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/wysiwyg-editor"><span data-docs-component-name>Wysiwyg Editor</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/advanced-date-picker">Advanced Date Picker</a><a data-docs-component-link href="/components/advanced-range-slider">Advanced Range Slider</a><a data-docs-component-link href="/components/chart">Chart</a><a data-docs-component-link href="/components/clipboard">Clipboard</a><a data-docs-component-link href="/components/confetti">Confetti</a><a data-docs-component-link href="/components/data-map">Data Map</a><a data-docs-component-link href="/components/data-table">Data Table</a><a data-docs-component-link href="/components/drag-and-drop">Drag And Drop</a><a data-docs-component-link href="/components/file-upload">File Upload</a><a data-docs-component-link href="/components/map">Map</a><a data-docs-component-link href="/components/toast-notifications">Toast Notifications</a><a data-docs-component-link href="/components/wysiwyg-editor">Wysiwyg Editor</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/layout">Layout</a>
-          <div><a data-docs-component-link href="/components/auth-split-layout"><span data-docs-component-name>Auth Split Layout</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/columns"><span data-docs-component-name>Columns</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/container"><span data-docs-component-name>Container</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/custom-scrollbar"><span data-docs-component-name>Custom Scrollbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/divider"><span data-docs-component-name>Divider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-grid"><span data-docs-component-name>Feature Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/grid"><span data-docs-component-name>Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/image"><span data-docs-component-name>Image</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/kbd"><span data-docs-component-name>Kbd</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/layout-splitter"><span data-docs-component-name>Layout Splitter</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/link"><span data-docs-component-name>Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/metric-grid"><span data-docs-component-name>Metric Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/public-page-shell"><span data-docs-component-name>Public Page Shell</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/section"><span data-docs-component-name>Section</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/section-header"><span data-docs-component-name>Section Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/text-link"><span data-docs-component-name>Text Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/typography"><span data-docs-component-name>Typography</span><small data-component-status="pending">Pending</small></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/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>
+        </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>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/navigation">Navigation</a>
-          <div><a data-docs-component-link href="/components/back-to-top"><span data-docs-component-name>Back To Top</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/breadcrumb"><span data-docs-component-name>Breadcrumb</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/footer"><span data-docs-component-name>Footer</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/mega-menu"><span data-docs-component-name>Mega Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/nav"><span data-docs-component-name>Nav</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/navbar"><span data-docs-component-name>Navbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/pagination"><span data-docs-component-name>Pagination</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/preference-switcher"><span data-docs-component-name>Preference Switcher</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/scrollspy"><span data-docs-component-name>Scrollspy</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/sidebar"><span data-docs-component-name>Sidebar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stepper"><span data-docs-component-name>Stepper</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tabs"><span data-docs-component-name>Tabs</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/back-to-top">Back To Top</a><a data-docs-component-link href="/components/breadcrumb">Breadcrumb</a><a data-docs-component-link href="/components/mega-menu">Mega Menu</a><a data-docs-component-link href="/components/nav">Nav</a><a data-docs-component-link href="/components/navbar">Navbar</a><a data-docs-component-link href="/components/pagination">Pagination</a><a data-docs-component-link href="/components/scrollspy">Scrollspy</a><a data-docs-component-link href="/components/sidebar">Sidebar</a><a data-docs-component-link href="/components/stepper">Stepper</a><a data-docs-component-link href="/components/tabs">Tabs</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/overlays">Overlays</a>
-          <div><a data-docs-component-link href="/components/context-menu"><span data-docs-component-name>Context Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/drawer"><span data-docs-component-name>Drawer</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/dropdown"><span data-docs-component-name>Dropdown</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/modal"><span data-docs-component-name>Modal</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/popover"><span data-docs-component-name>Popover</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tooltip"><span data-docs-component-name>Tooltip</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/context-menu">Context Menu</a><a data-docs-component-link href="/components/drawer">Drawer</a><a data-docs-component-link href="/components/dropdown">Dropdown</a><a data-docs-component-link href="/components/modal">Modal</a><a data-docs-component-link href="/components/popover">Popover</a><a data-docs-component-link href="/components/tooltip">Tooltip</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/tables">Tables</a>
-          <div><a data-docs-component-link href="/components/table"><span data-docs-component-name>Table</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/table">Table</a></div>
         </section>
           </nav>
           <p class="docs-directory-empty" data-docs-empty>No components found.</p>

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

@@ -10,7 +10,7 @@ page AccessibilityGuide {
       <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>
       
-      <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/blocks">Browse blocks <span aria-hidden="true">→</span></a></nav>
+      <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

@@ -3,100 +3,90 @@ page AdvancedFormsShowcase {
   layout = "showcase"
   seo {
     title = "Advanced Forms components"
-    description = "9 advanced-forms components from @wrnexus/ui."
+    description = "8 advanced-forms components from @wrnexus/ui."
   }
   view {
     <header class="showcase-hero showcase-hero--category">
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Advanced Forms</h1>
-      <p class="showcase-description">9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>9 components</span><span>Multiple use cases</span><span>116 live configurations</span></div>
+      <p class="showcase-description">8 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>8 components</span><span>Multiple use cases</span><span>112 live configurations</span></div>
     </header>
     <div class="catalog-grid">
-      <article class="catalog-card">
+      <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"><div data-component="AdvancedSelect" size="default" label="Default advanced select" name="advanced-select-1" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;:false}]" groups="[]" placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+          <div class="catalog-card-stage"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Advanced Select</h2><p>Theme-aware, responsive advanced select component.</p></div>
           <div class="catalog-card-footer"><span>51 props · 0 slots</span><a href="/components/advanced-select">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="ComboBox" label="Default autocomplete" name="combobox-1" value="" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;icon&quot;:&quot;icon-[lucide--life-buoy]&quot;,&quot;color&quot;:&quot;#f59e0b&quot;}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+          <div class="catalog-card-stage"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Combo Box</h2><p>Editable autocomplete combobox with local and remote suggestions.</p></div>
           <div class="catalog-card-footer"><span>41 props · 0 slots</span><a href="/components/combo-box">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="CopyMarkup" size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><CopyMarkup size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Copy Markup</h2><p>Theme-aware, responsive copy markup component.</p></div>
           <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/copy-markup">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
+          <div class="catalog-card-stage"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Input Number</h2><p>Theme-aware, responsive input number component.</p></div>
           <div class="catalog-card-footer"><span>40 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="PinInput" size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+          <div class="catalog-card-stage"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Pin Input</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p></div>
           <div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/pin-input">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="SearchBox" size="default" label="Search Box" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
-        </div>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Advanced Forms</span><h2>Search Box</h2><p>Theme-aware, responsive search box component.</p></div>
-          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/search-box">Explore component <span aria-hidden="true">→</span></a></div>
-        </div>
-      </article>
-      <article class="catalog-card">
-        <div class="catalog-card-preview">
-          <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="StrongPassword" label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+          <div class="catalog-card-stage"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
         </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>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="ToggleCount" size="default" color="primary" variant="segmented" name="pricing-cycle" value="annual" items="[{&quot;label&quot;:&quot;Startup&quot;,&quot;monthly&quot;:19,&quot;annual&quot;:190},{&quot;label&quot;:&quot;Team&quot;,&quot;monthly&quot;:89,&quot;annual&quot;:890},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;monthly&quot;:129,&quot;annual&quot;:1290}]" align="end"></div></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>
         <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>
           <div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/toggle-count">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <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"><div data-component="TogglePassword" size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields="[]" visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+          <div class="catalog-card-stage"><TogglePassword size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
         </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>

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

@@ -1,4 +1,4 @@
-page Blocks {
+page BlockLibrary {
   layout = "showcase"
   seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." }
   view {

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

@@ -10,7 +10,7 @@ page ColorsGuide {
       <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>
       
-      <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/blocks">Browse blocks <span aria-hidden="true">→</span></a></nav>
+      <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/advanced-date-picker.wrn

@@ -5,7 +5,7 @@ page AdvancedDatePickerDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Date Picker example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced date picker for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"advanced-date-picker-0-1\",\n    \"key\": \"advanced-date-picker-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#advanced-date-picker-demo\",\n    \"actionHref\": \"#advanced-date-picker-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"advanced-date-picker-0-2\",\n    \"key\": \"advanced-date-picker-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#advanced-date-picker-demo\",\n    \"actionHref\": \"#advanced-date-picker-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"advanced-date-picker-0-1\",\"key\":\"advanced-date-picker-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\":\"#advanced-date-picker-demo\",\"actionHref\":\"#advanced-date-picker-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\":\"advanced-date-picker-0-2\",\"key\":\"advanced-date-picker-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#advanced-date-picker-demo\",\"actionHref\":\"#advanced-date-picker-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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page AdvancedDatePickerDetail {
       </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="AdvancedDatePicker" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedDatePicker" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change,open,close,clear">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Advanced Date Picker</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><div data-component="AdvancedDatePicker" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AdvancedDatePicker 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;AdvancedDatePicker
@@ -147,6 +147,7 @@ page AdvancedDatePickerDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page AdvancedDatePickerDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-date-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-advanced-date-picker-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-advanced-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-date-picker-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page AdvancedDatePickerDetail {
         <div class="demo-workbench">
           <div id="advanced-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"><div data-component="AdvancedDatePicker" size="default" title="Advanced Date Picker example" description="A polished default advanced date picker for a modern application." items="[{&quot;id&quot;:&quot;advanced-date-picker-0-1&quot;,&quot;key&quot;:&quot;advanced-date-picker-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-date-picker-0-2&quot;,&quot;key&quot;:&quot;advanced-date-picker-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><AdvancedDatePicker size="default" title="Advanced Date Picker example" description="A polished default advanced date picker for a modern application." items='[{"id":"advanced-date-picker-0-1","key":"advanced-date-picker-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":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-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":"advanced-date-picker-0-2","key":"advanced-date-picker-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-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>
           <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>
@@ -399,7 +401,8 @@ page AdvancedDatePickerDetail {
         <div class="demo-workbench">
           <div id="advanced-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"><div data-component="AdvancedDatePicker" size="sm" title="Compact Advanced Date Picker" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;advanced-date-picker-1-1&quot;,&quot;key&quot;:&quot;advanced-date-picker-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-date-picker-1-2&quot;,&quot;key&quot;:&quot;advanced-date-picker-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><AdvancedDatePicker size="sm" title="Compact Advanced Date Picker" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"advanced-date-picker-1-1","key":"advanced-date-picker-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":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-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":"advanced-date-picker-1-2","key":"advanced-date-picker-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-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>
@@ -528,7 +531,8 @@ page AdvancedDatePickerDetail {
         <div class="demo-workbench">
           <div id="advanced-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"><div data-component="AdvancedDatePicker" size="lg" title="Advanced Advanced Date Picker" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;advanced-date-picker-2-1&quot;,&quot;key&quot;:&quot;advanced-date-picker-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;advanced-date-picker-2-2&quot;,&quot;key&quot;:&quot;advanced-date-picker-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><AdvancedDatePicker size="lg" title="Advanced Advanced Date Picker" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"advanced-date-picker-2-1","key":"advanced-date-picker-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":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-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":"advanced-date-picker-2-2","key":"advanced-date-picker-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":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-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>
@@ -649,11 +653,33 @@ page AdvancedDatePickerDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</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;AdvancedDatePicker
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @clear='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AdvancedDatePicker\"], [data-component=\"AdvancedDatePicker\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", event.detail)
+&#125;)</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>"Advanced Date Picker"</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>string</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">

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

@@ -5,7 +5,7 @@ page AdvancedRangeSliderDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Range Slider example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced range slider for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"advanced-range-slider-0-1\",\n    \"key\": \"advanced-range-slider-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#advanced-range-slider-demo\",\n    \"actionHref\": \"#advanced-range-slider-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"advanced-range-slider-0-2\",\n    \"key\": \"advanced-range-slider-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#advanced-range-slider-demo\",\n    \"actionHref\": \"#advanced-range-slider-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"advanced-range-slider-0-1\",\"key\":\"advanced-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\":\"#advanced-range-slider-demo\",\"actionHref\":\"#advanced-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\":\"advanced-range-slider-0-2\",\"key\":\"advanced-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\":\"#advanced-range-slider-demo\",\"actionHref\":\"#advanced-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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page AdvancedRangeSliderDetail {
       </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="AdvancedRangeSlider" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedRangeSlider" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change,start,end">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Advanced Range Slider</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><div data-component="AdvancedRangeSlider" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AdvancedRangeSlider 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;AdvancedRangeSlider
@@ -147,6 +147,7 @@ page AdvancedRangeSliderDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page AdvancedRangeSliderDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-range-slider-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-advanced-range-slider-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-advanced-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-range-slider-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page AdvancedRangeSliderDetail {
         <div class="demo-workbench">
           <div id="advanced-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"><div data-component="AdvancedRangeSlider" size="default" title="Advanced Range Slider example" description="A polished default advanced range slider for a modern application." items="[{&quot;id&quot;:&quot;advanced-range-slider-0-1&quot;,&quot;key&quot;:&quot;advanced-range-slider-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-range-slider-0-2&quot;,&quot;key&quot;:&quot;advanced-range-slider-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><AdvancedRangeSlider size="default" title="Advanced Range Slider example" description="A polished default advanced range slider for a modern application." items='[{"id":"advanced-range-slider-0-1","key":"advanced-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":"#advanced-range-slider-demo","actionHref":"#advanced-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":"advanced-range-slider-0-2","key":"advanced-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":"#advanced-range-slider-demo","actionHref":"#advanced-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"]}]' variant="default" 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>
@@ -399,7 +401,8 @@ page AdvancedRangeSliderDetail {
         <div class="demo-workbench">
           <div id="advanced-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"><div data-component="AdvancedRangeSlider" size="sm" title="Compact Advanced Range Slider" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;advanced-range-slider-1-1&quot;,&quot;key&quot;:&quot;advanced-range-slider-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-range-slider-1-2&quot;,&quot;key&quot;:&quot;advanced-range-slider-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><AdvancedRangeSlider size="sm" title="Compact Advanced Range Slider" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"advanced-range-slider-1-1","key":"advanced-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":"#advanced-range-slider-demo","actionHref":"#advanced-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":"advanced-range-slider-1-2","key":"advanced-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":"#advanced-range-slider-demo","actionHref":"#advanced-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"]}]' 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>
@@ -528,7 +531,8 @@ page AdvancedRangeSliderDetail {
         <div class="demo-workbench">
           <div id="advanced-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"><div data-component="AdvancedRangeSlider" size="lg" title="Advanced Advanced Range Slider" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;advanced-range-slider-2-1&quot;,&quot;key&quot;:&quot;advanced-range-slider-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;advanced-range-slider-2-2&quot;,&quot;key&quot;:&quot;advanced-range-slider-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><AdvancedRangeSlider size="lg" title="Advanced Advanced Range Slider" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"advanced-range-slider-2-1","key":"advanced-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":"#advanced-range-slider-demo","actionHref":"#advanced-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":"advanced-range-slider-2-2","key":"advanced-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":"#advanced-range-slider-demo","actionHref":"#advanced-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"]}]' 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>
@@ -649,11 +653,28 @@ page AdvancedRangeSliderDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@end</code><span>Fires when the component emits the end event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@end</code><span>Fires when the component emits the end event.</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;AdvancedRangeSlider
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @start='console.log(event.detail)'
+  @end='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AdvancedRangeSlider\"], [data-component=\"AdvancedRangeSlider\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("start", (event) =&gt; &#123;
+  console.log("start", event.detail)
+&#125;)
+
+component?.addEventListener("end", (event) =&gt; &#123;
+  console.log("end", event.detail)
+&#125;)</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>"Advanced Range Slider"</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>string</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">

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

@@ -10,33 +10,33 @@ page AuthFormDetail {
   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"
-  state playground_showName = ctx.url.searchParams.get("pg_showName") ?? "true"
+  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 authentication form for sign-in, registration, recovery, reset, and MFA."
+    description = "Reusable auth form component."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/forms">Forms</a><span aria-hidden="true">/</span><span>Auth Form</span>
+      <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">Forms component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Auth Form</h1>
-        <p>Reusable authentication form for sign-in, registration, recovery, reset, and MFA.</p>
+        <p>Reusable auth form component.</p>
         <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>5 events</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">
+    <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><div data-component="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></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
@@ -47,10 +47,11 @@ page AuthFormDetail {
 /&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 <code>event.detail</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><select id="playground-auth-form-mode" name="pg_mode"><option value="sign-in" selected>sign-in</option><option value="register">register</option><option value="recover">recover</option><option value="reset">reset</option><option value="mfa">mfa</option></select></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>
+          <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>
@@ -65,7 +66,8 @@ page AuthFormDetail {
         <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"><div data-component="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>
+            
+            <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>
@@ -86,7 +88,8 @@ page AuthFormDetail {
         <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"><div data-component="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>
+            
+            <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>
@@ -108,7 +111,8 @@ page AuthFormDetail {
         <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"><div data-component="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>
+            
+            <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>
@@ -122,11 +126,33 @@ page AuthFormDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 submits its value.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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(event.detail)'
+  @change='console.log(event.detail)'
+  @input='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AuthForm\"], [data-component=\"AuthForm\"]")
 
-component.addEventListener('submit', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("submit", (event) =&gt; &#123;
+  console.log("submit", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("focus", (event) =&gt; &#123;
+  console.log("focus", event.detail)
+&#125;)
+
+component?.addEventListener("blur", (event) =&gt; &#123;
+  console.log("blur", event.detail)
+&#125;)</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">
@@ -135,7 +161,7 @@ component.addEventListener('submit', (event) =&gt; &#123;
     </div>
     <nav class="detail-pagination">
       <span></span>
-      <a href="/components/checkbox"><small>Next</small><strong>Checkbox →</strong></a>
+      <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

@@ -7,31 +7,31 @@ page AuthSplitLayoutDetail {
   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 = ctx.url.searchParams.get("pg_features") ?? "[\n  {\n    \"label\": \"Team members\",\n    \"values\": [\n      \"5\",\n      \"Unlimited\",\n      \"Unlimited\"\n    ]\n  },\n  {\n    \"label\": \"Support\",\n    \"values\": [\n      \"Email\",\n      \"Priority\",\n      \"Dedicated\"\n    ]\n  },\n  {\n    \"label\": \"Audit history\",\n    \"values\": [\n      \"7 days\",\n      \"90 days\",\n      \"Custom\"\n    ]\n  }\n]"
+  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 = "Responsive 50/50 authentication layout with content and form regions."
+    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="/layout">Layout</a><span aria-hidden="true">/</span><span>Auth Split Layout</span>
+      <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">Layout component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Auth Split Layout</h1>
-        <p>Responsive 50/50 authentication layout with content and form regions.</p>
+        <p>Reusable auth split layout component.</p>
         <div class="detail-badges"><span>8 props</span><span>2 slots</span><span>0 events</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">
+    <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><div data-component="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 slot="aside-extra" class="showcase-slot">aside-extra slot</div><div slot="form" class="showcase-slot">form slot</div></div></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
@@ -63,10 +63,16 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&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>
@@ -110,7 +116,8 @@ page AuthSplitLayoutDetail {
         <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"><div data-component="AuthSplitLayout" size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--1"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></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>
@@ -143,7 +150,12 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&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>
@@ -156,7 +168,8 @@ page AuthSplitLayoutDetail {
         <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"><div data-component="AuthSplitLayout" size="sm" title="Compact Auth Split Layout" description="A compact configuration for dashboards and dense product surfaces." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--2"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></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>
@@ -190,7 +203,12 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&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>
@@ -203,7 +221,8 @@ page AuthSplitLayoutDetail {
         <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"><div data-component="AuthSplitLayout" size="lg" title="Advanced Auth Split Layout" description="A richer configuration demonstrating additional content and hierarchy." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--3"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></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>
@@ -237,21 +256,26 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&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="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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="#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="#events">Events</a><a href="#api">Props API</a></div>
+        <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">
-      <span></span>
-      <a href="/components/columns"><small>Next</small><strong>Columns →</strong></a>
+      <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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"src\": \"/avatar-example.svg\",\n    \"name\": \"Mark Wanner\",\n    \"alt\": \"Mark Wanner\"\n  },\n  {\n    \"src\": \"/avatar-example-2.svg\",\n    \"name\": \"Maria Guan\",\n    \"alt\": \"Maria Guan\"\n  },\n  {\n    \"src\": \"/avatar-example-3.svg\",\n    \"name\": \"Amil Evara\",\n    \"alt\": \"Amil Evara\"\n  },\n  {\n    \"initials\": \"EE\",\n    \"name\": \"Ebele Egbuna\",\n    \"color\": \"info\"\n  }\n]"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "lg"
+  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_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 = ctx.url.searchParams.get("pg_maxVisible") ?? "4"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
+  state playground_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "4")
+  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"
-  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  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"
   seo {
     title = "Avatar Group"
     description = "Theme-aware, responsive avatar group component."
@@ -30,66 +30,239 @@ page AvatarGroupDetail {
       </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="AvatarGroup" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AvatarGroup" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="overflow">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar Group</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><div data-component="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></div>
+          <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='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "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;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
+      "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"
+      ]
     &#125;
   ]'
-  size="lg"
+  overflowLabel="Avatar Group"
 /&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 <code>event.detail</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-avatar-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "src": "/avatar-example.svg",
-    "name": "Mark Wanner",
-    "alt": "Mark Wanner"
+    "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"
       },
       {
-    "src": "/avatar-example-2.svg",
-    "name": "Maria Guan",
-    "alt": "Maria Guan"
-  },
-  {
-    "src": "/avatar-example-3.svg",
-    "name": "Amil Evara",
-    "alt": "Amil Evara"
-  },
-  {
-    "initials": "EE",
-    "name": "Ebele Egbuna",
-    "color": "info"
+        "label": "Nested option B",
+        "value": "nested-b"
       }
-]</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="lg" selected>lg</option><option value="md">md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</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><select id="playground-avatar-group-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-avatar-group-shape" name="pg_shape" type="text" value="circle" /></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><input id="playground-avatar-group-layout" name="pg_layout" type="text" value="stack" /></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="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>
+    ],
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="4" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Avatar Group" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -98,252 +271,400 @@ page AvatarGroupDetail {
         <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">Facepile</span><h2>Overlapping stack</h2><p>Overlap avatars with negative spacing to create a compact team facepile.</p></div>
+          <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="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"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;}]" size="lg" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4"></div></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>
-          <section class="demo-code" aria-label="Overlapping stack usage">
+          <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='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "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;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
+      "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"
+      ]
     &#125;
   ]'
-  size="lg"
+  overflowLabel="Avatar Group"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Grid layout</h2><p>Arrange members in a grid with equal spacing and a clear overflow count.</p></div>
+          <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="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"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;},{&quot;initials&quot;:&quot;CL&quot;,&quot;name&quot;:&quot;Chris Lynch&quot;,&quot;color&quot;:&quot;success&quot;},{&quot;initials&quot;:&quot;NS&quot;,&quot;name&quot;:&quot;Nora Singh&quot;,&quot;color&quot;:&quot;warning&quot;},{&quot;initials&quot;:&quot;JR&quot;,&quot;name&quot;:&quot;Jon Rivera&quot;,&quot;color&quot;:&quot;danger&quot;},{&quot;initials&quot;:&quot;AK&quot;,&quot;name&quot;:&quot;Amina Khan&quot;,&quot;color&quot;:&quot;secondary&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="7" columns="3"></div></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>
-          <section class="demo-code" aria-label="Grid layout usage">
+          <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='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-      "initials": "CL",
-      "name": "Chris Lynch",
-      "color": "success"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "initials": "NS",
-      "name": "Nora Singh",
-      "color": "warning"
-    &#125;,
-    &#123;
-      "initials": "JR",
-      "name": "Jon Rivera",
-      "color": "danger"
-    &#125;,
-    &#123;
-      "initials": "AK",
-      "name": "Amina Khan",
-      "color": "secondary"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  layout="grid"
-  maxVisible="7"
+  size="sm"
+  variant="secondary"
+  overflowLabel="Compact example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Border</span><h2>Custom border color</h2><p>Change the ring color so stacked groups remain distinct on different surfaces.</p></div>
+          <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="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"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" borderColor="#2583ff"></div></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>
-          <section class="demo-code" aria-label="Custom border color usage">
+          <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='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
     &#125;,
     &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
-    &#125;
-  ]'
-  borderColor="#2583ff"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Tooltip</span><h2>Member tooltips</h2><p>Reveal each member's name on pointer hover or keyboard focus.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-group-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" showTooltips="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Member tooltips 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='[
-    &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
-    &#125;,
-    &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
-    &#125;
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Overflow</span><h2>Dropdown overflow</h2><p>Open the overflow counter to inspect members hidden by the visible limit.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-group-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;},{&quot;initials&quot;:&quot;CL&quot;,&quot;name&quot;:&quot;Chris Lynch&quot;,&quot;color&quot;:&quot;success&quot;},{&quot;initials&quot;:&quot;NS&quot;,&quot;name&quot;:&quot;Nora Singh&quot;,&quot;color&quot;:&quot;warning&quot;},{&quot;initials&quot;:&quot;JR&quot;,&quot;name&quot;:&quot;Jon Rivera&quot;,&quot;color&quot;:&quot;danger&quot;},{&quot;initials&quot;:&quot;AK&quot;,&quot;name&quot;:&quot;Amina Khan&quot;,&quot;color&quot;:&quot;secondary&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" showTooltips="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Dropdown overflow 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='[
-    &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
-    &#125;,
-    &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
-    &#125;,
-    &#123;
-      "initials": "CL",
-      "name": "Chris Lynch",
-      "color": "success"
-    &#125;,
-    &#123;
-      "initials": "NS",
-      "name": "Nora Singh",
-      "color": "warning"
-    &#125;,
-    &#123;
-      "initials": "JR",
-      "name": "Jon Rivera",
-      "color": "danger"
-    &#125;,
-    &#123;
-      "initials": "AK",
-      "name": "Amina Khan",
-      "color": "secondary"
+      "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": [
+        &#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",
+        "Unlimited"
+      ]
     &#125;
   ]'
+  size="lg"
+  variant="success"
+  overflowLabel="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@overflow</code><span>Fires when the component emits the overflow event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@overflow</code><span>Fires when the component emits the overflow event.</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;AvatarGroup
+  @overflow='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AvatarGroup\"], [data-component=\"AvatarGroup\"]")
 
-component.addEventListener('overflow', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("overflow", (event) =&gt; &#123;
+  console.log("overflow", event.detail)
+&#125;)</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>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>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>"circle"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"stack"</code></td><td>No</td></tr><tr><td><code>maxVisible</code></td><td>number</td><td><code>4</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>borderColor</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showTooltips</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>overflowLabel</code></td><td>string</td><td><code>"Show remaining members"</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="#avatar-group-demo-1">Overlapping stack</a><a href="#avatar-group-demo-2">Grid layout</a><a href="#avatar-group-demo-3">Custom border color</a><a href="#avatar-group-demo-4">Member tooltips</a><a href="#avatar-group-demo-5">Dropdown overflow</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-group-demo-1">Production default</a><a href="#avatar-group-demo-2">Compact application</a><a href="#avatar-group-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -1,24 +1,24 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page AvatarDetail {
   layout = "showcase"
-  state playground_src = ctx.url.searchParams.get("pg_src") ?? "/avatar-example.svg"
-  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Example profile portrait"
+  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_size = ctx.url.searchParams.get("pg_size") ?? "xs"
+  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") ?? ""
+  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? "Avatar"
   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") ?? ""
+  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") ?? ""
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application."
   state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Avatar"
     description = "Theme-aware, responsive avatar component."
@@ -36,25 +36,26 @@ page AvatarDetail {
       </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="Avatar" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Avatar" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="load,error,click">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar</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><div data-component="Avatar" src="{playground_src}" alt="{playground_alt}" initials="{playground_initials}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" status="{playground_status}" statusLabel="{playground_statusLabel}" statusPosition="{playground_statusPosition}" badge="{playground_badge}" badgeIcon="{playground_badgeIcon}" badgeLabel="{playground_badgeLabel}" tooltip="{playground_tooltip}" name="{playground_name}" description="{playground_description}" loading="{playground_loading}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Avatar src='{playground_src}' alt='{playground_alt}' initials='{playground_initials}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' status='{playground_status}' statusLabel='{playground_statusLabel}' statusPosition='{playground_statusPosition}' badge='{playground_badge}' badgeIcon='{playground_badgeIcon}' badgeLabel='{playground_badgeLabel}' tooltip='{playground_tooltip}' name='{playground_name}' description='{playground_description}' loading='{playground_loading}' 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;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-  size="xs"
+  statusLabel="Avatar"
+  badgeLabel="Avatar"
+  description="A polished default avatar for a modern application."
 /&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 <code>event.detail</code>.</span></div>
         </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="/avatar-example.svg" /></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="Example profile portrait" /></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="xs" selected>xs</option><option value="md">md</option><option value="default">default</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><select id="playground-avatar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-avatar-shape" name="pg_shape" type="text" value="circle" /></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="" /></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="" /></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>
+          <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>
         </form>
       </div>
     </section>
@@ -63,371 +64,92 @@ page AvatarDetail {
         <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">Size & shape</span><h2>Extra-small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
+          <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="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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></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>
-          <section class="demo-code" aria-label="Extra-small circular avatar usage">
+          <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
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-  size="xs"
+  statusLabel="Avatar"
+  badgeLabel="Avatar"
+  description="A polished default avatar for a modern application."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
+          <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="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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="sm" color="primary" variant="solid" shape="circle"></div></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>
-          <section class="demo-code" aria-label="Small circular avatar usage">
+          <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
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
   size="sm"
+  variant="secondary"
+  statusLabel="Compact example"
+  badgeLabel="Compact example"
+  description="A compact configuration for dashboards and dense product surfaces."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Medium circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
+          <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="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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="md" color="primary" variant="solid" shape="circle"></div></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>
-          <section class="demo-code" aria-label="Medium circular avatar usage">
+          <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
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="lg" color="primary" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Large circular avatar 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
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
   size="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Extra-large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xl" color="primary" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Extra-large circular avatar 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
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-  size="xl"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Rounded avatars</h2><p>Apply softly rounded corners when a circle is not the right fit.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-6" class="demo-canvas demo-canvas--6">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example rounded profile portrait" size="lg" color="primary" variant="solid" shape="rounded"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Rounded avatars 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
-  src="/avatar-example.svg"
-  alt="Example rounded profile portrait"
-  size="lg"
-  shape="rounded"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with top status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-7" class="demo-canvas demo-canvas--7">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" statusLabel="Online" statusPosition="top"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Circular avatars with top status 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
-  src="/avatar-example.svg"
-  alt="Avery Chen"
-  size="lg"
-  status="online"
-  statusLabel="Online"
-  statusPosition="top"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with bottom status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-8" class="demo-canvas demo-canvas--8">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="away" statusLabel="Away" statusPosition="bottom"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Circular avatars with bottom status 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
-  src="/avatar-example.svg"
-  alt="Avery Chen"
-  size="lg"
-  status="away"
-  statusLabel="Away"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Fallbacks</span><h2>Avatars with brand icons</h2><p>Overlay a service or platform icon to identify a linked account.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-9" class="demo-canvas demo-canvas--9">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Linked profile" size="lg" color="primary" variant="solid" shape="circle" badgeIcon="icon-[lucide--message-square]" badgeLabel="Messaging account"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Avatars with brand icons 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
-  src="/avatar-example.svg"
-  alt="Linked profile"
-  size="lg"
-  badgeIcon="icon-[lucide--message-square]"
-  badgeLabel="Messaging account"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder icon</h2><p>Show a generic person icon when no profile image is available.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-10" class="demo-canvas demo-canvas--10">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Anonymous profile" size="lg" color="primary" variant="soft" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Placeholder icon 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="Anonymous profile"
-  size="lg"
-  variant="soft"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder initials</h2><p>Use initials as an accessible text fallback for a missing image.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-11" class="demo-canvas demo-canvas--11">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Placeholder initials 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="Avery Chen"
-  initials="AC"
-  size="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>Solid color variants</h2><p>Use the solid treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">012</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-12" class="demo-canvas demo-canvas--12">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="success" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Solid color variants 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="Avery Chen"
-  initials="AC"
-  size="lg"
-  color="success"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>Soft color variants</h2><p>Use the soft treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">013</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-13" class="demo-canvas demo-canvas--13">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="info" variant="soft" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Soft color variants 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="Avery Chen"
-  initials="AC"
-  size="lg"
-  color="info"
-  variant="soft"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>Outline color variants</h2><p>Use the outline treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">014</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-14" class="demo-canvas demo-canvas--14">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="danger" variant="outline" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Outline color variants 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="Avery Chen"
-  initials="AC"
-  size="lg"
-  color="danger"
-  variant="outline"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>White color variants</h2><p>Use the white treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">015</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-15" class="demo-canvas demo-canvas--15">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="white" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="White color variants 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="Avery Chen"
-  initials="AC"
-  size="lg"
-  variant="white"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Avatar with tooltip</h2><p>Reveal a name or extra context on hover and keyboard focus.</p></div>
-          <span class="demo-case-number">016</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-16" class="demo-canvas demo-canvas--16">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" tooltip="Avery Chen · Online" name="Avery Chen"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Avatar with tooltip 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
-  src="/avatar-example.svg"
-  alt="Avery Chen"
-  size="lg"
-  status="online"
-  tooltip="Avery Chen · Online"
-  name="Avery Chen"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Media object</h2><p>Combine an avatar with supporting text for profile and activity rows.</p></div>
-          <span class="demo-case-number">017</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-17" class="demo-canvas demo-canvas--17">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Mark Wanner" size="lg" color="primary" variant="solid" shape="circle" name="Mark Wanner" description="mark@example.com"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Media object 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
-  src="/avatar-example.svg"
-  alt="Mark Wanner"
-  size="lg"
-  name="Mark Wanner"
-  description="mark@example.com"
+  variant="success"
+  statusLabel="Advanced example"
+  badgeLabel="Advanced example"
+  description="A richer configuration demonstrating additional content and hierarchy."
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires after remote or deferred content loads successfully.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div><div><code>@click</code><span>Fires when the interactive surface 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;Avatar
+  @load='console.log(event.detail)'
+  @error='console.log(event.detail)'
+  @click='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Avatar\"], [data-component=\"Avatar\"]")
 
-component.addEventListener('load', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("load", (event) =&gt; &#123;
+  console.log("load", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)
+
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", event.detail)
+&#125;)</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>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>initials</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>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>"circle"</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusPosition</code></td><td>string</td><td><code>"bottom"</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>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tooltip</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>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</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="#avatar-demo-1">Extra-small circular avatar</a><a href="#avatar-demo-2">Small circular avatar</a><a href="#avatar-demo-3">Medium circular avatar</a><a href="#avatar-demo-4">Large circular avatar</a><a href="#avatar-demo-5">Extra-large circular avatar</a><a href="#avatar-demo-6">Rounded avatars</a><a href="#avatar-demo-7">Circular avatars with top status</a><a href="#avatar-demo-8">Circular avatars with bottom status</a><a href="#avatar-demo-9">Avatars with brand icons</a><a href="#avatar-demo-10">Placeholder icon</a><a href="#avatar-demo-11">Placeholder initials</a><a href="#avatar-demo-12">Solid color variants</a><a href="#avatar-demo-13">Soft color variants</a><a href="#avatar-demo-14">Outline color variants</a><a href="#avatar-demo-15">White color variants</a><a href="#avatar-demo-16">Avatar with tooltip</a><a href="#avatar-demo-17">Media object</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-demo-1">Production default</a><a href="#avatar-demo-2">Compact application</a><a href="#avatar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -1,21 +1,24 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page BackToTopDetail {
   layout = "showcase"
-  state playground_threshold = ctx.url.searchParams.get("pg_threshold") ?? "500"
+  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_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"
+  state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "true") === "true"
+  state playground_showLabel = (ctx.url.searchParams.get("pg_showLabel") ?? "true") === "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"
   seo {
     title = "Back To Top"
-    description = "Accessible scroll-to-top control with visibility threshold."
+    description = "Provide a responsive floating control that returns long pages to the top and can show scroll progress."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -25,30 +28,32 @@ page BackToTopDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Back To Top</h1>
-        <p>Accessible scroll-to-top control with visibility threshold.</p>
-        <div class="detail-badges"><span>12 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Provide a responsive floating control that returns long pages to the top and can show scroll progress.</p>
+        <div class="detail-badges"><span>15 props</span><span>0 slots</span><span>0 events</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="BackToTop" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="BackToTop" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Back To Top</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><div data-component="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}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <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>
           </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-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="top">top</option><option value="bottom">bottom</option><option value="left">left</option><option value="start">start</option><option value="end">end</option><option value="center">center</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><input id="playground-back-to-top-behavior" name="pg_behavior" type="text" value="smooth" /></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-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="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-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="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</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>
+          <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>
         </form>
       </div>
     </section>
@@ -57,75 +62,86 @@ page BackToTopDetail {
         <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>Floating round control</h2><p>Return visitors to the top of a long page after the scroll threshold is reached.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <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"><div data-component="BackToTop" threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" showProgress="true" size="default" variant="solid" class="showcase-instance showcase-instance--1"></div></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>
-          <section class="demo-code" aria-label="Production default usage">
+          <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>
         </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>Pill control with label</h2><p>Show a visible text label when the action needs extra clarity.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <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"><div data-component="BackToTop" threshold="500" label="Compact example" ariaLabel="Back To Top 2 example" icon="icon-[lucide--arrow-right]" showProgress="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
-          <section class="demo-code" aria-label="Compact application usage">
+          <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
-  label="Compact example"
   ariaLabel="Back To Top 2 example"
   icon="icon-[lucide--arrow-right]"
   showProgress="true"
+  showLabel="true"
+  alwaysVisible="true"
   size="sm"
-  variant="secondary"
+  variant="soft"
+  shape="pill"
 /&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Progress-aware control</h2><p>Display page scroll progress around the floating control on long articles or directories.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <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"><div data-component="BackToTop" threshold="500" label="Advanced example" ariaLabel="Back To Top 3 example" icon="icon-[lucide--trash-2]" showProgress="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></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>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <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="success"
+  variant="outline"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</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>"solid"</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>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</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>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</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="#back-to-top-demo-1">Production default</a><a href="#back-to-top-demo-2">Compact application</a><a href="#back-to-top-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#back-to-top-demo-1">Floating round control</a><a href="#back-to-top-demo-2">Pill control with label</a><a href="#back-to-top-demo-3">Progress-aware control</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -3,17 +3,17 @@ page BlockquoteDetail {
   layout = "showcase"
   state playground_quote = ctx.url.searchParams.get("pg_quote") ?? "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
   state playground_citation = ctx.url.searchParams.get("pg_citation") ?? ""
-  state playground_citationTitle = ctx.url.searchParams.get("pg_citationTitle") ?? ""
+  state playground_citationTitle = ctx.url.searchParams.get("pg_citationTitle") ?? "Blockquote example"
   state playground_citationUrl = ctx.url.searchParams.get("pg_citationUrl") ?? ""
   state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
   state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "left"
+  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_quoteMark = ctx.url.searchParams.get("pg_quoteMark") ?? "true"
-  state playground_italic = ctx.url.searchParams.get("pg_italic") ?? "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_quoteMark = (ctx.url.searchParams.get("pg_quoteMark") ?? "true") === "true"
+  state playground_italic = (ctx.url.searchParams.get("pg_italic") ?? "true") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Blockquote"
     description = "Theme-aware, responsive blockquote component."
@@ -31,21 +31,25 @@ page BlockquoteDetail {
       </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="Blockquote" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Blockquote" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Blockquote</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><div data-component="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>
+          <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>
           <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 /&gt;</code></pre>
+            <pre><code data-playground-code>&lt;Blockquote
+  citationTitle="Blockquote example"
+  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>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="" /></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="left" selected>left</option><option value="center">center</option><option value="right">right</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-blockquote-variant" name="pg_variant"><option value="default" selected>default</option><option value="bordered">bordered</option></select></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="" /></label></div>
+          <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>
         </form>
       </div>
     </section>
@@ -60,11 +64,15 @@ page BlockquoteDetail {
         <div class="demo-workbench">
           <div id="blockquote-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 data-component="Blockquote" quote="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." size="md" color="primary" align="left" variant="default" quoteMark="true" italic="true"></div></div>
+            
+            <div class="demo-render"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="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>
-            <pre><code>&lt;Blockquote /&gt;</code></pre>
+            <pre><code>&lt;Blockquote
+  citationTitle="Blockquote example"
+  align="start"
+/&gt;</code></pre>
           </section>
         </div>
       </article>
@@ -76,17 +84,16 @@ page BlockquoteDetail {
         <div class="demo-workbench">
           <div id="blockquote-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"><div data-component="Blockquote" quote="Good design makes the complex understandable and the useful feel effortless." citation="Josh Grazioso" citationTitle="Product designer" size="sm" color="info" align="center" variant="default" quoteMark="true" italic="true"></div></div>
+            
+            <div class="demo-render"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="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>
             <pre><code>&lt;Blockquote
-  quote="Good design makes the complex understandable and the useful feel effortless."
-  citation="Josh Grazioso"
-  citationTitle="Product designer"
+  citationTitle="Compact Blockquote"
   size="sm"
-  color="info"
   align="center"
+  variant="secondary"
 /&gt;</code></pre>
           </section>
         </div>
@@ -99,30 +106,25 @@ page BlockquoteDetail {
         <div class="demo-workbench">
           <div id="blockquote-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"><div data-component="Blockquote" quote="The strongest product experiences are built when clarity, craft, and empathy reinforce one another." citation="Josh Grazioso" citationTitle="Source title" citationUrl="#blockquote-demo" avatarSrc="/avatar-example.svg" avatarAlt="Josh Grazioso" size="lg" color="success" align="left" variant="bordered" quoteMark="false" italic="true"></div></div>
+            
+            <div class="demo-render"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="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>
             <pre><code>&lt;Blockquote
-  quote="The strongest product experiences are built when clarity, craft, and empathy reinforce one another."
-  citation="Josh Grazioso"
-  citationTitle="Source title"
-  citationUrl="#blockquote-demo"
-  avatarSrc="/avatar-example.svg"
-  avatarAlt="Josh Grazioso"
+  citationTitle="Advanced Blockquote"
   size="lg"
-  color="success"
-  variant="bordered"
-  quoteMark="false"
+  align="end"
+  variant="success"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>
       </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="#events">Events</a><a href="#api">Props API</a></div>
+        <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>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -1,16 +1,21 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page BreadcrumbDetail {
   layout = "showcase"
+  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_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"
+  state playground_homeHref = ctx.url.searchParams.get("pg_homeHref") ?? "#breadcrumb-demo"
+  state playground_homeIcon = ctx.url.searchParams.get("pg_homeIcon") ?? "icon-[lucide--house]"
   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") ?? "Breadcrumb"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"breadcrumb-0-1\",\n    \"key\": \"breadcrumb-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#breadcrumb-demo\",\n    \"actionHref\": \"#breadcrumb-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"breadcrumb-0-2\",\n    \"key\": \"breadcrumb-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#breadcrumb-demo\",\n    \"actionHref\": \"#breadcrumb-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
-  state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "minimal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Breadcrumb"
-    description = "Theme-aware, responsive breadcrumb component."
+    description = "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +25,17 @@ page BreadcrumbDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Breadcrumb</h1>
-        <p>Theme-aware, responsive breadcrumb component.</p>
-        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <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 events</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="Breadcrumb" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Breadcrumb" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Breadcrumb</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><div data-component="Breadcrumb" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></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>
           <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
@@ -142,13 +147,17 @@ page BreadcrumbDetail {
       ]
     &#125;
   ]'
+  showHome="true"
+  homeLabel="Breadcrumb"
+  homeHref="#breadcrumb-demo"
 /&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 <code>event.detail</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-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="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-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>string</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "breadcrumb-0-1",
     "key": "breadcrumb-0-1",
@@ -255,7 +264,7 @@ page BreadcrumbDetail {
       "Standard"
     ]
   }
-]</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-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-breadcrumb-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</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-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>
@@ -264,397 +273,136 @@ page BreadcrumbDetail {
         <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>Minimal page trail</h2><p>Use a restrained breadcrumb above standard page content.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="breadcrumb-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 data-component="Breadcrumb" size="default" label="Breadcrumb" items="[{&quot;id&quot;:&quot;breadcrumb-0-1&quot;,&quot;key&quot;:&quot;breadcrumb-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;breadcrumb-0-2&quot;,&quot;key&quot;:&quot;breadcrumb-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <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='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Components",
+      "href": "/base"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "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": [
-        &#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": "Page header",
+      "current": true
     &#125;
   ]'
+  showHome="true"
+  homeLabel="Breadcrumb"
+  homeHref="#breadcrumb-demo"
+  size="small"
 /&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>Soft navigation trail</h2><p>Add a soft surface when the breadcrumb needs more separation from surrounding content.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="breadcrumb-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"><div data-component="Breadcrumb" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;breadcrumb-1-1&quot;,&quot;key&quot;:&quot;breadcrumb-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;breadcrumb-1-2&quot;,&quot;key&quot;:&quot;breadcrumb-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <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
-  size="sm"
   label="Compact example"
   items='[
     &#123;
-      "id": "breadcrumb-1-1",
-      "key": "breadcrumb-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": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Components",
+      "href": "/base"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "breadcrumb-1-2",
-      "key": "breadcrumb-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-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": [
-        &#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": "Page header",
+      "current": true
     &#125;
   ]'
+  showHome="true"
+  homeLabel="Compact example"
+  homeHref="#breadcrumb-demo"
+  size="medium"
+  variant="soft"
 /&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large directory breadcrumb</h2><p>Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="breadcrumb-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"><div data-component="Breadcrumb" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;breadcrumb-2-1&quot;,&quot;key&quot;:&quot;breadcrumb-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;breadcrumb-2-2&quot;,&quot;key&quot;:&quot;breadcrumb-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <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
-  size="lg"
   label="Advanced example"
   items='[
     &#123;
-      "id": "breadcrumb-2-1",
-      "key": "breadcrumb-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": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Components",
+      "href": "/base"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    &#125;,
-    &#123;
-      "id": "breadcrumb-2-2",
-      "key": "breadcrumb-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": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-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": [
-        &#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",
-        "Unlimited"
-      ]
+      "label": "Page header",
+      "current": true
     &#125;
   ]'
+  separator="slash"
+  showHome="true"
+  homeLabel="Advanced example"
+  homeHref="#breadcrumb-demo"
+  size="large"
+  variant="outline"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@navigate</code><span>Fires when the component emits the navigate event.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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><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;Breadcrumb
+  @select='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Breadcrumb\"], [data-component=\"Breadcrumb\"]")
 
-component.addEventListener('navigate', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></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>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</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>orientation</code></td><td>string</td><td><code>"horizontal"</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>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</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>string</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>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Production default</a><a href="#breadcrumb-demo-2">Compact application</a><a href="#breadcrumb-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/back-to-top"><small>Previous</small><strong>← Back To Top</strong></a>
-      <a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
+      <a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</strong></a>
     </nav>
   }
 }

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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"label\": \"Profile\",\n    \"value\": \"profile\"\n  },\n  {\n    \"label\": \"Settings\",\n    \"value\": \"settings\"\n  },\n  {\n    \"label\": \"Messages\",\n    \"value\": \"messages\"\n  }\n]"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "profile"
+  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_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") ?? "outline"
+  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"
-  state playground_attached = ctx.url.searchParams.get("pg_attached") ?? "true"
-  state playground_selectable = ctx.url.searchParams.get("pg_selectable") ?? "true"
-  state playground_toolbar = ctx.url.searchParams.get("pg_toolbar") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  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_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"
   seo {
     title = "Button Group"
     description = "Theme-aware, responsive button group component."
@@ -31,52 +31,240 @@ page ButtonGroupDetail {
       </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="ButtonGroup" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ButtonGroup" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="click,select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Button Group</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><div data-component="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></div>
+          <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='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "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": "Settings",
-      "value": "settings"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "label": "Messages",
-      "value": "messages"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#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"
+      ]
     &#125;
   ]'
-  value="profile"
-  variant="outline"
-  selectable="true"
+  value="sample-1"
+  ariaLabel="Button Group 1 example"
 /&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 <code>event.detail</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-button-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "label": "Profile",
-    "value": "profile"
+    "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": "Settings",
-    "value": "settings"
-  },
-  {
-    "label": "Messages",
-    "value": "messages"
+        "label": "Nested option B",
+        "value": "nested-b"
       }
-]</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="profile" /></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><select id="playground-button-group-variant" name="pg_variant"><option value="outline" selected>outline</option><option value="default">default</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+    ],
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button Group 1 example" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -85,250 +273,413 @@ page ButtonGroupDetail {
         <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">Basic usage</span><h2>Example</h2><p>Group related actions into one compact, visually connected control.</p></div>
+          <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="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"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" value="profile" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true"></div></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>
-          <section class="demo-code" aria-label="Example usage">
+          <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='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "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": "Settings",
-      "value": "settings"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "label": "Messages",
-      "value": "messages"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#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"
+      ]
     &#125;
   ]'
-  value="profile"
-  variant="outline"
-  selectable="true"
+  value="sample-1"
+  ariaLabel="Button Group 1 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Small</h2><p>Use small grouped buttons in dense toolbars, tables, and utility surfaces.</p></div>
+          <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="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"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" size="sm" color="primary" variant="outline" orientation="horizontal" attached="true"></div></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>
-          <section class="demo-code" aria-label="Small usage">
+          <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='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-      "label": "Settings",
-      "value": "settings"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "label": "Messages",
-      "value": "messages"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "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": [
+        &#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;
   ]'
+  value="sample-2"
   size="sm"
-  variant="outline"
+  variant="secondary"
+  ariaLabel="Button Group 2 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Medium</h2><p>Use the balanced medium size for most product interfaces.</p></div>
+          <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="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"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" size="md" color="primary" variant="outline" orientation="horizontal" attached="true"></div></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>
-          <section class="demo-code" aria-label="Medium usage">
+          <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='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-      "label": "Settings",
-      "value": "settings"
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-      "label": "Messages",
-      "value": "messages"
-    &#125;
-  ]'
-  variant="outline"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Large</h2><p>Use large grouped buttons for prominent actions and touch-focused layouts.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" size="lg" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Large 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='[
-    &#123;
-      "label": "Profile",
-      "value": "profile"
-    &#125;,
-    &#123;
-      "label": "Settings",
-      "value": "settings"
-    &#125;,
-    &#123;
-      "label": "Messages",
-      "value": "messages"
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    &#125;,
+    &#123;
+      "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": [
+        &#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",
+        "Unlimited"
+      ]
     &#125;
   ]'
+  value="sample-3"
   size="lg"
-  variant="outline"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Responsive stack</span><h2>Responsive stack</h2><p>Keep actions inline on larger screens and stack them on narrow viewports.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Save draft&quot;,&quot;value&quot;:&quot;draft&quot;},{&quot;label&quot;:&quot;Preview&quot;,&quot;value&quot;:&quot;preview&quot;},{&quot;label&quot;:&quot;Publish&quot;,&quot;value&quot;:&quot;publish&quot;}]" size="md" color="primary" variant="outline" orientation="horizontal" responsive="true" attached="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Responsive stack 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='[
-    &#123;
-      "label": "Save draft",
-      "value": "draft"
-    &#125;,
-    &#123;
-      "label": "Preview",
-      "value": "preview"
-    &#125;,
-    &#123;
-      "label": "Publish",
-      "value": "publish"
-    &#125;
-  ]'
-  variant="outline"
-  responsive="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Orientation</span><h2>Vertical stack</h2><p>Stack connected actions vertically while preserving joined borders.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-6" class="demo-canvas demo-canvas--6">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Account&quot;,&quot;value&quot;:&quot;account&quot;},{&quot;label&quot;:&quot;Security&quot;,&quot;value&quot;:&quot;security&quot;},{&quot;label&quot;:&quot;Notifications&quot;,&quot;value&quot;:&quot;notifications&quot;}]" size="md" color="primary" variant="outline" orientation="vertical" attached="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Vertical stack 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='[
-    &#123;
-      "label": "Account",
-      "value": "account"
-    &#125;,
-    &#123;
-      "label": "Security",
-      "value": "security"
-    &#125;,
-    &#123;
-      "label": "Notifications",
-      "value": "notifications"
-    &#125;
-  ]'
-  variant="outline"
-  orientation="vertical"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Toolbar</span><h2>Button toolbar</h2><p>Expose a labeled toolbar with selectable formatting actions.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-7" class="demo-canvas demo-canvas--7">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Bold&quot;,&quot;value&quot;:&quot;bold&quot;,&quot;icon&quot;:&quot;icon-[lucide--bold]&quot;},{&quot;label&quot;:&quot;Italic&quot;,&quot;value&quot;:&quot;italic&quot;,&quot;icon&quot;:&quot;icon-[lucide--italic]&quot;},{&quot;label&quot;:&quot;Underline&quot;,&quot;value&quot;:&quot;underline&quot;,&quot;icon&quot;:&quot;icon-[lucide--underline]&quot;}]" value="bold" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true" toolbar="true" ariaLabel="Text formatting"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Button toolbar 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='[
-    &#123;
-      "label": "Bold",
-      "value": "bold",
-      "icon": "icon-[lucide--bold]"
-    &#125;,
-    &#123;
-      "label": "Italic",
-      "value": "italic",
-      "icon": "icon-[lucide--italic]"
-    &#125;,
-    &#123;
-      "label": "Underline",
-      "value": "underline",
-      "icon": "icon-[lucide--underline]"
-    &#125;
-  ]'
-  value="bold"
-  variant="outline"
-  selectable="true"
-  toolbar="true"
-  ariaLabel="Text formatting"
+  variant="success"
+  ariaLabel="Button Group 3 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the interactive surface is activated.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</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;ButtonGroup
+  @click='console.log(event.detail)'
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ButtonGroup\"], [data-component=\"ButtonGroup\"]")
 
-component.addEventListener('click', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>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>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>"default"</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>responsive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>attached</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>toolbar</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>ariaLabel</code></td><td>string</td><td><code>"Button group"</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><span class="detail-toc-group">Basic usage</span><a href="#button-group-demo-1">Example</a><span class="detail-toc-group">Sizes</span><a href="#button-group-demo-2">Small</a><a href="#button-group-demo-3">Medium</a><a href="#button-group-demo-4">Large</a><a href="#button-group-demo-5">Responsive stack</a><a href="#button-group-demo-6">Vertical stack</a><a href="#button-group-demo-7">Button toolbar</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-group-demo-1">Production default</a><a href="#button-group-demo-2">Compact application</a><a href="#button-group-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -5,7 +5,7 @@ page ChartDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"chart-0-1\",\n    \"key\": \"chart-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#chart-demo\",\n    \"actionHref\": \"#chart-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"chart-0-2\",\n    \"key\": \"chart-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#chart-demo\",\n    \"actionHref\": \"#chart-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ChartDetail {
       </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="Chart" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Chart" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,dataPointClick,legendToggle">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Chart</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><div data-component="Chart" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Chart 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;Chart
@@ -147,6 +147,7 @@ page ChartDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page ChartDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-chart-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ChartDetail {
         <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"><div data-component="Chart" size="default" title="Chart example" description="A polished default chart for a modern application." items="[{&quot;id&quot;:&quot;chart-0-1&quot;,&quot;key&quot;:&quot;chart-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;chart-0-2&quot;,&quot;key&quot;:&quot;chart-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Chart size="default" 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"]}]' variant="default" 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>
@@ -399,7 +401,8 @@ page ChartDetail {
         <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"><div data-component="Chart" size="sm" title="Compact Chart" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;chart-1-1&quot;,&quot;key&quot;:&quot;chart-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;chart-1-2&quot;,&quot;key&quot;:&quot;chart-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Chart size="sm" 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"]}]' 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>
@@ -528,7 +531,8 @@ page ChartDetail {
         <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"><div data-component="Chart" size="lg" title="Advanced Chart" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;chart-2-1&quot;,&quot;key&quot;:&quot;chart-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;chart-2-2&quot;,&quot;key&quot;:&quot;chart-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Chart size="lg" 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"]}]' 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>
@@ -649,11 +653,23 @@ page ChartDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@dataPointClick</code><span>Fires when the component emits the data Point Click event.</span></div><div><code>@legendToggle</code><span>Fires when the component emits the legend Toggle event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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>@dataPointClick</code><span>Fires when the component emits the dataPointClick event.</span></div><div><code>@legendToggle</code><span>Fires when the component emits the legendToggle event.</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;Chart
+  @select='console.log(event.detail)'
+  @dataPointClick='console.log(event.detail)'
+  @legendToggle='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Chart\"], [data-component=\"Chart\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("dataPointClick", (event) =&gt; &#123;
+  console.log("dataPointClick", event.detail)
+&#125;)
+
+component?.addEventListener("legendToggle", (event) =&gt; &#123;
+  console.log("legendToggle", event.detail)
+&#125;)</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>"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>string</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">

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") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"question\",\n    \"direction\": \"incoming\",\n    \"author\": \"Support agent\",\n    \"title\": \"How can we help?\",\n    \"text\": \"You can ask questions like:\",\n    \"bullets\": [\n      \"What's WireJS UI?\",\n      \"How many component examples are there?\",\n      \"Is there a PRO version?\"\n    ]\n  },\n  {\n    \"id\": \"request\",\n    \"direction\": \"outgoing\",\n    \"author\": \"AZ\",\n    \"text\": \"what's wirejs ui?\"\n  },\n  {\n    \"id\": \"answer\",\n    \"direction\": \"incoming\",\n    \"author\": \"Support agent\",\n    \"text\": \"WireJS UI is an open-source set of reusable UI components built for responsive applications.\",\n    \"links\": [\n      {\n        \"label\": \"Installation guide\",\n        \"href\": \"/installation\"\n      },\n      {\n        \"label\": \"Framework guides\",\n        \"href\": \"/framework-guides\"\n      }\n    ]\n  }\n]"
-  state playground_oneSided = ctx.url.searchParams.get("pg_oneSided") ?? "false"
-  state playground_showAvatars = ctx.url.searchParams.get("pg_showAvatars") ?? "false"
-  state playground_showMetadata = ctx.url.searchParams.get("pg_showMetadata") ?? "false"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation"
+  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_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
+  state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "true") === "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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Chat Bubble"
     description = "Theme-aware, responsive chat bubble component."
@@ -29,93 +29,243 @@ page ChatBubbleDetail {
       </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="ChatBubble" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ChatBubble" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="action,messageClick,avatarClick,linkClick">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Chat Bubble</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><div data-component="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></div>
+          <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='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "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"
       ]
     &#125;,
     &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?"
+      "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;
-      "id": "answer",
-      "direction": "incoming",
-      "author": "Support agent",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
       "links": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "API reference",
+          "href": "#api-reference"
         &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;
   ]'
+  showAvatars="true"
+  showMetadata="true"
+  ariaLabel="Chat Bubble 1 example"
 /&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 <code>event.detail</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="" /></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>string</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="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>string</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "question",
-    "direction": "incoming",
-    "author": "Support agent",
-    "title": "How can we help?",
-    "text": "You can ask questions like:",
-    "bullets": [
-      "What's WireJS UI?",
-      "How many component examples are there?",
-      "Is there a PRO version?"
-    ]
+    "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"
       },
       {
-    "id": "request",
-    "direction": "outgoing",
-    "author": "AZ",
-    "text": "what's wirejs ui?"
-  },
-  {
-    "id": "answer",
-    "direction": "incoming",
-    "author": "Support agent",
-    "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
     "links": [
       {
-        "label": "Installation guide",
-        "href": "/installation"
+        "label": "Documentation",
+        "href": "#documentation"
       },
       {
-        "label": "Framework guides",
-        "href": "/framework-guides"
+        "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"
     ]
   }
-]</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" 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><select id="playground-chat-bubble-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Chat Bubble 1 example" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -124,261 +274,427 @@ page ChatBubbleDetail {
         <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">Basic usage</span><h2>Conversation</h2><p>Show a basic two-sided conversation with incoming and outgoing messages.</p></div>
+          <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="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"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;]},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}]}]" oneSided="false" showAvatars="false" showMetadata="false" ariaLabel="Conversation"></div></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>
-          <section class="demo-code" aria-label="Conversation usage">
+          <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='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "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"
       ]
     &#125;,
     &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?"
+      "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;
-      "id": "answer",
-      "direction": "incoming",
-      "author": "Support agent",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
       "links": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "API reference",
+          "href": "#api-reference"
         &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;
   ]'
+  showAvatars="true"
+  showMetadata="true"
+  ariaLabel="Chat Bubble 1 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>One-sided</h2><p>Use one-sided bubbles for support transcripts or single-direction message feeds.</p></div>
+          <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="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"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;]},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}]}]" oneSided="true" showAvatars="false" showMetadata="false" ariaLabel="One-sided"></div></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>
-          <section class="demo-code" aria-label="One-sided usage">
+          <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='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "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": [
+        &#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": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-      "id": "answer",
-      "direction": "incoming",
-      "author": "Support agent",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
       "links": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "API reference",
+          "href": "#api-reference"
         &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;
   ]'
-  oneSided="true"
-  ariaLabel="One-sided"
+  showAvatars="true"
+  showMetadata="true"
+  ariaLabel="Chat Bubble 2 example"
+  variant="secondary"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Identity</span><h2>Messages with avatars</h2><p>Add avatars when people need to identify message ownership at a glance.</p></div>
+          <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="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"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;],&quot;avatarSrc&quot;:&quot;/avatar-example.svg&quot;,&quot;avatarAlt&quot;:&quot;Support agent&quot;,&quot;avatarLabel&quot;:&quot;View support agent&quot;},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;,&quot;avatarFallback&quot;:&quot;AZ&quot;,&quot;avatarLabel&quot;:&quot;View AZ&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}],&quot;avatarSrc&quot;:&quot;/avatar-example.svg&quot;,&quot;avatarAlt&quot;:&quot;Support agent&quot;,&quot;avatarLabel&quot;:&quot;View support agent&quot;}]" oneSided="false" showAvatars="true" showMetadata="false" ariaLabel="Messages with avatars"></div></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>
-          <section class="demo-code" aria-label="Messages with avatars usage">
+          <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='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
       ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent"
-    &#125;,
-    &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?",
-      "avatarFallback": "AZ",
-      "avatarLabel": "View AZ"
-    &#125;,
-    &#123;
-      "id": "answer",
-      "direction": "incoming",
-      "author": "Support agent",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
       "links": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "API reference",
+          "href": "#api-reference"
         &#125;
       ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent"
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    &#125;,
+    &#123;
+      "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": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
         &#125;
-  ]'
-  showAvatars="true"
-  ariaLabel="Messages with avatars"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Message details</span><h2>Message metadata</h2><p>Add delivery state, timestamps, or recovery actions beneath each message.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="chat-bubble-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;],&quot;avatarSrc&quot;:&quot;/avatar-example.svg&quot;,&quot;avatarAlt&quot;:&quot;Support agent&quot;,&quot;avatarLabel&quot;:&quot;View support agent&quot;,&quot;status&quot;:&quot;Sent&quot;,&quot;statusIcon&quot;:&quot;icon-[lucide--check-check]&quot;,&quot;timestamp&quot;:&quot;10:32&quot;,&quot;datetime&quot;:&quot;2026-07-28T10:32:00&quot;},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;,&quot;avatarFallback&quot;:&quot;AZ&quot;,&quot;avatarLabel&quot;:&quot;View AZ&quot;,&quot;status&quot;:&quot;Read&quot;,&quot;statusIcon&quot;:&quot;icon-[lucide--check-check]&quot;,&quot;timestamp&quot;:&quot;10:33&quot;,&quot;datetime&quot;:&quot;2026-07-28T10:33:00&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}],&quot;avatarSrc&quot;:&quot;/avatar-example.svg&quot;,&quot;avatarAlt&quot;:&quot;Support agent&quot;,&quot;avatarLabel&quot;:&quot;View support agent&quot;,&quot;status&quot;:&quot;Not sent&quot;,&quot;statusIcon&quot;:&quot;icon-[lucide--circle-alert]&quot;,&quot;statusTone&quot;:&quot;danger&quot;,&quot;action&quot;:&quot;retry&quot;,&quot;actionLabel&quot;:&quot;Retry&quot;}]" oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Message metadata"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Message metadata 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
-  items='[
-    &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
       ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent",
-      "status": "Sent",
-      "statusIcon": "icon-[lucide--check-check]",
-      "timestamp": "10:32",
-      "datetime": "2026-07-28T10:32:00"
-    &#125;,
-    &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?",
-      "avatarFallback": "AZ",
-      "avatarLabel": "View AZ",
-      "status": "Read",
-      "statusIcon": "icon-[lucide--check-check]",
-      "timestamp": "10:33",
-      "datetime": "2026-07-28T10:33:00"
-    &#125;,
-    &#123;
-      "id": "answer",
-      "direction": "incoming",
-      "author": "Support agent",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
       "links": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "API reference",
+          "href": "#api-reference"
         &#125;
       ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent",
-      "status": "Not sent",
-      "statusIcon": "icon-[lucide--circle-alert]",
-      "statusTone": "danger",
-      "action": "retry",
-      "actionLabel": "Retry"
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
     &#125;
   ]'
   showAvatars="true"
   showMetadata="true"
-  ariaLabel="Message metadata"
+  ariaLabel="Chat Bubble 3 example"
+  variant="success"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@action</code><span>Fires when the component's action is selected.</span></div><div><code>@messageClick</code><span>Fires when a message bubble is selected.</span></div><div><code>@avatarClick</code><span>Fires when a message avatar is selected.</span></div><div><code>@linkClick</code><span>Fires when a link inside a message is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div><div><code>@messageClick</code><span>Fires when the component emits the messageClick event.</span></div><div><code>@avatarClick</code><span>Fires when the component emits the avatarClick event.</span></div><div><code>@linkClick</code><span>Fires when the component emits the linkClick event.</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;ChatBubble
+  @action='console.log(event.detail)'
+  @messageClick='console.log(event.detail)'
+  @avatarClick='console.log(event.detail)'
+  @linkClick='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ChatBubble\"], [data-component=\"ChatBubble\"]")
 
-component.addEventListener('action', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)
+
+component?.addEventListener("messageClick", (event) =&gt; &#123;
+  console.log("messageClick", event.detail)
+&#125;)
+
+component?.addEventListener("avatarClick", (event) =&gt; &#123;
+  console.log("avatarClick", event.detail)
+&#125;)
+
+component?.addEventListener("linkClick", (event) =&gt; &#123;
+  console.log("linkClick", event.detail)
+&#125;)</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>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>oneSided</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showAvatars</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showMetadata</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Conversation"</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="#chat-bubble-demo-1">Conversation</a><a href="#chat-bubble-demo-2">One-sided</a><a href="#chat-bubble-demo-3">Messages with avatars</a><a href="#chat-bubble-demo-4">Message metadata</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chat-bubble-demo-1">Production default</a><a href="#chat-bubble-demo-2">Compact application</a><a href="#chat-bubble-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -5,7 +5,7 @@ page ClipboardDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   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_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"clipboard-0-1\",\n    \"key\": \"clipboard-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#clipboard-demo\",\n    \"actionHref\": \"#clipboard-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"clipboard-0-2\",\n    \"key\": \"clipboard-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#clipboard-demo\",\n    \"actionHref\": \"#clipboard-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"clipboard-0-1\",\"key\":\"clipboard-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\":\"#clipboard-demo\",\"actionHref\":\"#clipboard-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\":\"clipboard-0-2\",\"key\":\"clipboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#clipboard-demo\",\"actionHref\":\"#clipboard-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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ClipboardDetail {
       </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="Clipboard" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Clipboard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="copy,success,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Clipboard</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><div data-component="Clipboard" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Clipboard 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;Clipboard
@@ -147,6 +147,7 @@ page ClipboardDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page ClipboardDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-clipboard-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-clipboard-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-clipboard-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-clipboard-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ClipboardDetail {
         <div class="demo-workbench">
           <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"><div data-component="Clipboard" size="default" title="Clipboard example" description="A polished default clipboard for a modern application." items="[{&quot;id&quot;:&quot;clipboard-0-1&quot;,&quot;key&quot;:&quot;clipboard-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;clipboard-0-2&quot;,&quot;key&quot;:&quot;clipboard-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Clipboard size="default" title="Clipboard example" description="A polished default clipboard for a modern application." items='[{"id":"clipboard-0-1","key":"clipboard-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":"#clipboard-demo","actionHref":"#clipboard-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":"clipboard-0-2","key":"clipboard-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#clipboard-demo","actionHref":"#clipboard-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>
           <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>
@@ -399,7 +401,8 @@ page ClipboardDetail {
         <div class="demo-workbench">
           <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"><div data-component="Clipboard" size="sm" title="Compact Clipboard" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;clipboard-1-1&quot;,&quot;key&quot;:&quot;clipboard-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;clipboard-1-2&quot;,&quot;key&quot;:&quot;clipboard-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Clipboard size="sm" title="Compact Clipboard" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"clipboard-1-1","key":"clipboard-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":"#clipboard-demo","actionHref":"#clipboard-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":"clipboard-1-2","key":"clipboard-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#clipboard-demo","actionHref":"#clipboard-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>
@@ -528,7 +531,8 @@ page ClipboardDetail {
         <div class="demo-workbench">
           <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"><div data-component="Clipboard" size="lg" title="Advanced Clipboard" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;clipboard-2-1&quot;,&quot;key&quot;:&quot;clipboard-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;clipboard-2-2&quot;,&quot;key&quot;:&quot;clipboard-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Clipboard size="lg" title="Advanced Clipboard" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"clipboard-2-1","key":"clipboard-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":"#clipboard-demo","actionHref":"#clipboard-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":"clipboard-2-2","key":"clipboard-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":"#clipboard-demo","actionHref":"#clipboard-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>
@@ -649,11 +653,23 @@ page ClipboardDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component emits the success event.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</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;Clipboard
+  @copy='console.log(event.detail)'
+  @success='console.log(event.detail)'
+  @error='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Clipboard\"], [data-component=\"Clipboard\"]")
 
-component.addEventListener('copy', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("copy", (event) =&gt; &#123;
+  console.log("copy", event.detail)
+&#125;)
+
+component?.addEventListener("success", (event) =&gt; &#123;
+  console.log("success", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)</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>"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>items</code></td><td>string</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">

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

@@ -3,13 +3,13 @@ page ColumnsDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   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 = "Columns"
-    description = "Theme-aware, responsive columns component."
+    description = "Create responsive balanced content columns with configurable count, gap, density, and maximum width."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,26 +19,27 @@ page ColumnsDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Columns</h1>
-        <p>Theme-aware, responsive columns component.</p>
+        <p>Create responsive balanced content columns with configurable count, gap, density, and maximum width.</p>
         <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</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="Columns" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Columns" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Columns</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><div data-component="Columns" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Columns size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></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;Columns /&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>6 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-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-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-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-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-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-columns-gap" name="pg_gap"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-columns-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-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-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-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-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-columns-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-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-columns-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-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -47,65 +48,78 @@ page ColumnsDetail {
         <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>Two-column content layout</h2><p>Split supporting content into balanced responsive columns.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="columns-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 data-component="Columns" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Two-column content layout 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;Columns /&gt;</code></pre>
+            <pre><code>&lt;Columns
+  gap="lg"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;Content column&lt;/span&gt;&lt;span&gt;Supporting column&lt;/span&gt;&lt;/div&gt;
+&lt;/Columns&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>Three compact columns</h2><p>Use three columns for short summaries and dashboard groups.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="columns-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"><div data-component="Columns" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Three compact columns 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;Columns
-  size="sm"
-/&gt;</code></pre>
+  size="compact"
+  columns="3"
+  gap="sm"
+  maxWidth="wide"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/div&gt;
+&lt;/Columns&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width four columns</h2><p>Use the full available width for structured application content.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="columns-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"><div data-component="Columns" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width four columns 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;Columns
   size="lg"
-/&gt;</code></pre>
+  columns="4"
+  maxWidth="full"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;B&lt;/span&gt;&lt;span&gt;C&lt;/span&gt;&lt;span&gt;D&lt;/span&gt;&lt;/div&gt;
+&lt;/Columns&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>columns</code></td><td>number</td><td><code>2</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>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="#columns-demo-1">Production default</a><a href="#columns-demo-2">Compact application</a><a href="#columns-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#columns-demo-1">Two-column content layout</a><a href="#columns-demo-2">Three compact columns</a><a href="#columns-demo-3">Full-width four columns</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/auth-split-layout"><small>Previous</small><strong>← Auth Split Layout</strong></a>
+      <span></span>
       <a href="/components/container"><small>Next</small><strong>Container →</strong></a>
     </nav>
   }

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

@@ -5,7 +5,7 @@ page ConfettiDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Confetti example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default confetti for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"confetti-0-1\",\n    \"key\": \"confetti-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#confetti-demo\",\n    \"actionHref\": \"#confetti-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"confetti-0-2\",\n    \"key\": \"confetti-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#confetti-demo\",\n    \"actionHref\": \"#confetti-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"confetti-0-1\",\"key\":\"confetti-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\":\"#confetti-demo\",\"actionHref\":\"#confetti-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\":\"confetti-0-2\",\"key\":\"confetti-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#confetti-demo\",\"actionHref\":\"#confetti-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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ConfettiDetail {
       </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="Confetti" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Confetti" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="start,complete">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Confetti</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><div data-component="Confetti" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Confetti 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;Confetti
@@ -147,6 +147,7 @@ page ConfettiDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page ConfettiDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-confetti-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-confetti-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</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>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-confetti-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-confetti-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ConfettiDetail {
         <div class="demo-workbench">
           <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"><div data-component="Confetti" size="default" title="Confetti example" description="A polished default confetti for a modern application." items="[{&quot;id&quot;:&quot;confetti-0-1&quot;,&quot;key&quot;:&quot;confetti-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;confetti-0-2&quot;,&quot;key&quot;:&quot;confetti-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Confetti size="default" title="Confetti example" description="A polished default confetti for a modern application." items='[{"id":"confetti-0-1","key":"confetti-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":"#confetti-demo","actionHref":"#confetti-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":"confetti-0-2","key":"confetti-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#confetti-demo","actionHref":"#confetti-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>
           <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>
@@ -399,7 +401,8 @@ page ConfettiDetail {
         <div class="demo-workbench">
           <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"><div data-component="Confetti" size="sm" title="Compact Confetti" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;confetti-1-1&quot;,&quot;key&quot;:&quot;confetti-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;confetti-1-2&quot;,&quot;key&quot;:&quot;confetti-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Confetti size="sm" title="Compact Confetti" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"confetti-1-1","key":"confetti-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":"#confetti-demo","actionHref":"#confetti-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":"confetti-1-2","key":"confetti-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#confetti-demo","actionHref":"#confetti-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>
@@ -528,7 +531,8 @@ page ConfettiDetail {
         <div class="demo-workbench">
           <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"><div data-component="Confetti" size="lg" title="Advanced Confetti" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;confetti-2-1&quot;,&quot;key&quot;:&quot;confetti-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;confetti-2-2&quot;,&quot;key&quot;:&quot;confetti-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Confetti size="lg" title="Advanced Confetti" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"confetti-2-1","key":"confetti-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":"#confetti-demo","actionHref":"#confetti-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":"confetti-2-2","key":"confetti-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":"#confetti-demo","actionHref":"#confetti-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>
@@ -649,11 +653,18 @@ page ConfettiDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@complete</code><span>Fires when the component emits the complete event.</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;Confetti
+  @start='console.log(event.detail)'
+  @complete='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Confetti\"], [data-component=\"Confetti\"]")
 
-component.addEventListener('start', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("start", (event) =&gt; &#123;
+  console.log("start", event.detail)
+&#125;)
+
+component?.addEventListener("complete", (event) =&gt; &#123;
+  console.log("complete", event.detail)
+&#125;)</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>"Confetti"</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>string</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">

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

@@ -3,13 +3,13 @@ page ContainerDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   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 = "Container"
-    description = "Theme-aware, responsive container component."
+    description = "Constrain and align page content with responsive gutters and compact, wide, or full width options."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,28 +19,29 @@ page ContainerDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Container</h1>
-        <p>Theme-aware, responsive container component.</p>
+        <p>Constrain and align page content with responsive gutters and compact, wide, or full width options.</p>
         <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</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="Container" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Container" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Container</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><div data-component="Container" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
+          <div class="playground-preview-source" data-playground-preview><Container size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-content-block">Centered container content</div></Container></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;Container&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;div class="showcase-slot"&gt;&lt;span class="icon-[lucide--layers-3] size-4" aria-hidden="true"&gt;&lt;/span&gt;&lt;span&gt;Composable content area.&lt;/span&gt;&lt;/div&gt;
 &lt;/Container&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>6 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-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-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><option value="compact">compact</option><option value="comfortable">comfortable</option><option value="spacious">spacious</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-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-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</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-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-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-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-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-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-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-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -49,65 +50,70 @@ page ContainerDetail {
         <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>Standard content container</h2><p>Keep page content aligned to a predictable readable width.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="container-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 data-component="Container" size="default" columns="2" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
+            
+            <div class="demo-render"><Container size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Standard content container 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;Container&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;div class="showcase-content-block"&gt;Centered container content&lt;/div&gt;
 &lt;/Container&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>Compact reading container</h2><p>Use a smaller maximum width for forms, legal copy, and focused content.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="container-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"><div data-component="Container" size="sm" columns="2" class="showcase-instance showcase-instance--2"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
+            
+            <div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact reading container 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;Container
-  size="sm"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  size="compact"
+  maxWidth="compact"&gt;
+  &lt;div class="showcase-content-block"&gt;Compact readable content&lt;/div&gt;
 &lt;/Container&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width layout container</h2><p>Allow dashboards and data-heavy pages to use the available width.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="container-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"><div data-component="Container" size="lg" columns="2" class="showcase-instance showcase-instance--3"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Rich supporting content with additional context.</span></div></div></div>
+            
+            <div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width layout container 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;Container
-  size="lg"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  size="spacious"
+  maxWidth="full"&gt;
+  &lt;div class="showcase-content-block"&gt;Full-width dashboard content&lt;/div&gt;
 &lt;/Container&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>columns</code></td><td>number</td><td><code>2</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>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="#container-demo-1">Production default</a><a href="#container-demo-2">Compact application</a><a href="#container-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#container-demo-1">Standard content container</a><a href="#container-demo-2">Compact reading container</a><a href="#container-demo-3">Full-width layout container</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

examples/component-showcase/app/pages/components/copy-markup.wrn

@@ -11,8 +11,8 @@ page CopyMarkupDetail {
   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") ?? ""
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  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"
   seo {
     title = "Copy Markup"
@@ -31,12 +31,12 @@ page CopyMarkupDetail {
       </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="CopyMarkup" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CopyMarkup" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="copy,success,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Copy Markup</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><div data-component="CopyMarkup" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><CopyMarkup size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' min='{playground_min}' max='{playground_max}' step='{playground_step}' 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;CopyMarkup
@@ -45,6 +45,7 @@ page CopyMarkupDetail {
 /&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 <code>event.detail</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>
@@ -63,7 +64,8 @@ page CopyMarkupDetail {
         <div class="demo-workbench">
           <div id="copy-markup-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 data-component="CopyMarkup" size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><CopyMarkup size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" 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>
@@ -82,7 +84,8 @@ page CopyMarkupDetail {
         <div class="demo-workbench">
           <div id="copy-markup-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"><div data-component="CopyMarkup" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><CopyMarkup size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" 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>
@@ -103,7 +106,8 @@ page CopyMarkupDetail {
         <div class="demo-workbench">
           <div id="copy-markup-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"><div data-component="CopyMarkup" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><CopyMarkup size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" 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>
@@ -116,11 +120,23 @@ page CopyMarkupDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component emits the success event.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</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;CopyMarkup
+  @copy='console.log(event.detail)'
+  @success='console.log(event.detail)'
+  @error='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"CopyMarkup\"], [data-component=\"CopyMarkup\"]")
 
-component.addEventListener('copy', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("copy", (event) =&gt; &#123;
+  console.log("copy", event.detail)
+&#125;)
+
+component?.addEventListener("success", (event) =&gt; &#123;
+  console.log("success", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)</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>"Copy Markup"</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>"text"</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>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">

examples/component-showcase/app/pages/components/custom-scrollbar.wrn

@@ -3,7 +3,7 @@ page CustomScrollbarDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -24,21 +24,22 @@ page CustomScrollbarDetail {
       </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="CustomScrollbar" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CustomScrollbar" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="scroll">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Custom Scrollbar</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><div data-component="CustomScrollbar" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><CustomScrollbar size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' 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;CustomScrollbar /&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 <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 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-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-custom-scrollbar-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-custom-scrollbar-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-custom-scrollbar-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -53,7 +54,8 @@ page CustomScrollbarDetail {
         <div class="demo-workbench">
           <div id="custom-scrollbar-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 data-component="CustomScrollbar" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><CustomScrollbar size="default" columns="2" 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>
@@ -69,7 +71,8 @@ page CustomScrollbarDetail {
         <div class="demo-workbench">
           <div id="custom-scrollbar-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"><div data-component="CustomScrollbar" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><CustomScrollbar size="sm" columns="2" 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>
@@ -87,7 +90,8 @@ page CustomScrollbarDetail {
         <div class="demo-workbench">
           <div id="custom-scrollbar-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"><div data-component="CustomScrollbar" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><CustomScrollbar size="lg" columns="2" 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>
@@ -97,11 +101,13 @@ page CustomScrollbarDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@scroll</code><span>Fires when the component emits the scroll event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@scroll</code><span>Fires when the component emits the scroll event.</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;CustomScrollbar
+  @scroll='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"CustomScrollbar\"], [data-component=\"CustomScrollbar\"]")
 
-component.addEventListener('scroll', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("scroll", (event) =&gt; &#123;
+  console.log("scroll", event.detail)
+&#125;)</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>columns</code></td><td>number</td><td><code>2</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>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">

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

@@ -5,7 +5,7 @@ page DataMapDetail {
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"data-map-0-1\",\n    \"key\": \"data-map-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#data-map-demo\",\n    \"actionHref\": \"#data-map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"data-map-0-2\",\n    \"key\": \"data-map-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#data-map-demo\",\n    \"actionHref\": \"#data-map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page DataMapDetail {
       </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="DataMap" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DataMap" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Data Map</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><div data-component="DataMap" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <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
@@ -147,6 +147,7 @@ page DataMapDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page DataMapDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-data-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page DataMapDetail {
         <div class="demo-workbench">
           <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"><div data-component="DataMap" size="default" title="Data Map example" description="A polished default data map for a modern application." items="[{&quot;id&quot;:&quot;data-map-0-1&quot;,&quot;key&quot;:&quot;data-map-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;data-map-0-2&quot;,&quot;key&quot;:&quot;data-map-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></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>
           <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>
@@ -399,7 +401,8 @@ page DataMapDetail {
         <div class="demo-workbench">
           <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"><div data-component="DataMap" size="sm" title="Compact Data Map" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;data-map-1-1&quot;,&quot;key&quot;:&quot;data-map-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;data-map-1-2&quot;,&quot;key&quot;:&quot;data-map-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
           <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>
@@ -528,7 +531,8 @@ page DataMapDetail {
         <div class="demo-workbench">
           <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"><div data-component="DataMap" size="lg" title="Advanced Data Map" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;data-map-2-1&quot;,&quot;key&quot;:&quot;data-map-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;data-map-2-2&quot;,&quot;key&quot;:&quot;data-map-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></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>
           <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>
@@ -649,11 +653,18 @@ page DataMapDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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>@change</code><span>Fires when the component's committed value or selection changes.</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;DataMap
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"DataMap\"], [data-component=\"DataMap\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>"Data 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>string</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">

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

@@ -5,14 +5,14 @@ page DeviceFrameDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Device Frame example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default device frame for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"device-frame-0-1\",\n    \"key\": \"device-frame-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#device-frame-demo\",\n    \"actionHref\": \"#device-frame-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"device-frame-0-2\",\n    \"key\": \"device-frame-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#device-frame-demo\",\n    \"actionHref\": \"#device-frame-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"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\":[{\"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\":\"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\":[{\"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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_device = ctx.url.searchParams.get("pg_device") ?? "phone"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "portrait"
   state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
   state playground_srcdoc = ctx.url.searchParams.get("pg_srcdoc") ?? ""
   state playground_frameTitle = ctx.url.searchParams.get("pg_frameTitle") ?? "Device Frame example"
-  state playground_showToolbar = ctx.url.searchParams.get("pg_showToolbar") ?? "true"
+  state playground_showToolbar = (ctx.url.searchParams.get("pg_showToolbar") ?? "true") === "true"
   state playground_allow = ctx.url.searchParams.get("pg_allow") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -32,12 +32,12 @@ page DeviceFrameDetail {
       </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="DeviceFrame" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DeviceFrame" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change,rotate">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Device Frame</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><div data-component="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></div>
+          <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
@@ -155,6 +155,7 @@ page DeviceFrameDetail {
 /&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 <code>event.detail</code>.</span></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>
@@ -265,7 +266,7 @@ page DeviceFrameDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-device-frame-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-device-frame-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -280,7 +281,8 @@ page DeviceFrameDetail {
         <div class="demo-workbench">
           <div id="device-frame-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 data-component="DeviceFrame" size="default" title="Device Frame example" description="A polished default device frame for a modern application." items="[{&quot;id&quot;:&quot;device-frame-0-1&quot;,&quot;key&quot;:&quot;device-frame-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;device-frame-0-2&quot;,&quot;key&quot;:&quot;device-frame-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><DeviceFrame size="default" title="Device Frame example" description="A polished default device frame for a modern application." items='[{"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":[{"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":"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":[{"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" frameTitle="Device Frame example" showToolbar="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>
@@ -408,7 +410,8 @@ page DeviceFrameDetail {
         <div class="demo-workbench">
           <div id="device-frame-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"><div data-component="DeviceFrame" size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;device-frame-1-1&quot;,&quot;key&quot;:&quot;device-frame-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;device-frame-1-2&quot;,&quot;key&quot;:&quot;device-frame-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><DeviceFrame size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items='[{"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":[{"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":"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":[{"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" frameTitle="Compact Device Frame" showToolbar="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>
@@ -538,7 +541,8 @@ page DeviceFrameDetail {
         <div class="demo-workbench">
           <div id="device-frame-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"><div data-component="DeviceFrame" size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;device-frame-2-1&quot;,&quot;key&quot;:&quot;device-frame-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;device-frame-2-2&quot;,&quot;key&quot;:&quot;device-frame-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><DeviceFrame size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items='[{"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":[{"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":"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":[{"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" frameTitle="Advanced Device Frame" showToolbar="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>
@@ -660,11 +664,18 @@ page DeviceFrameDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@rotate</code><span>Fires when the component emits the rotate event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@rotate</code><span>Fires when the component emits the rotate event.</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;DeviceFrame
+  @change='console.log(event.detail)'
+  @rotate='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"DeviceFrame\"], [data-component=\"DeviceFrame\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("rotate", (event) =&gt; &#123;
+  console.log("rotate", event.detail)
+&#125;)</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>"Device Frame"</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>string</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>device</code></td><td>string</td><td><code>"phone"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"portrait"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>srcdoc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>frameTitle</code></td><td>string</td><td><code>"Device preview"</code></td><td>No</td></tr><tr><td><code>showToolbar</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allow</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">

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

@@ -8,7 +8,7 @@ page DividerDetail {
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Divider"
-    description = "Theme-aware, responsive divider component."
+    description = "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -18,17 +18,17 @@ page DividerDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Divider</h1>
-        <p>Theme-aware, responsive divider component.</p>
+        <p>Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.</p>
         <div class="detail-badges"><span>5 props</span><span>0 slots</span><span>0 events</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="Divider" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Divider" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Divider</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><div data-component="Divider" size="{playground_size}" color="{playground_color}" label="{playground_label}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Divider size='{playground_size}' color='{playground_color}' label='{playground_label}' orientation='{playground_orientation}' 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;Divider
@@ -36,10 +36,11 @@ page DividerDetail {
 /&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>5 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-divider-size"><span><strong>size</strong><small>string</small></span><select id="playground-divider-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-divider-color"><span><strong>color</strong><small>string</small></span><select id="playground-divider-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-divider-label"><span><strong>label</strong><small>string</small></span><input id="playground-divider-label" name="pg_label" type="text" value="Divider" /></label><label class="playground-field" for="playground-divider-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-divider-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-divider-class"><span><strong>class</strong><small>string</small></span><input id="playground-divider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-divider-size"><span><strong>size</strong><small>string</small></span><select id="playground-divider-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-divider-color"><span><strong>color</strong><small>string</small></span><select id="playground-divider-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-divider-label"><span><strong>label</strong><small>string</small></span><input id="playground-divider-label" name="pg_label" type="text" value="Divider" /></label><label class="playground-field" for="playground-divider-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-divider-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-divider-class"><span><strong>class</strong><small>string</small></span><input id="playground-divider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -48,65 +49,69 @@ page DividerDetail {
         <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>Horizontal section divider</h2><p>Separate related content without introducing another container.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="divider-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 data-component="Divider" size="default" label="Divider" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Horizontal section divider 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;Divider
-  label="Divider"
+  label="Related information"
 /&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>Minimal unlabeled divider</h2><p>Use a quiet rule between compact content groups.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="divider-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"><div data-component="Divider" size="sm" label="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Divider size="sm" label="" orientation="horizontal" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Minimal unlabeled divider 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;Divider
   size="sm"
-  label="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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Vertical toolbar divider</h2><p>Separate groups of inline actions in toolbars and navigation.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="divider-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"><div data-component="Divider" size="lg" label="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Vertical toolbar divider 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;Divider
   size="lg"
-  label="Advanced example"
+  color="info"
+  label="Actions"
+  orientation="vertical"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>""</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>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="#divider-demo-1">Production default</a><a href="#divider-demo-2">Compact application</a><a href="#divider-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#divider-demo-1">Horizontal section divider</a><a href="#divider-demo-2">Minimal unlabeled divider</a><a href="#divider-demo-3">Vertical toolbar divider</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -5,7 +5,7 @@ page DragAndDropDetail {
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"drag-and-drop-0-1\",\n    \"key\": \"drag-and-drop-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#drag-and-drop-demo\",\n    \"actionHref\": \"#drag-and-drop-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"drag-and-drop-0-2\",\n    \"key\": \"drag-and-drop-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#drag-and-drop-demo\",\n    \"actionHref\": \"#drag-and-drop-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page DragAndDropDetail {
       </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="DragAndDrop" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DragAndDrop" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="dragStart,dragEnd,dragEnter,dragLeave,drop,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Drag And Drop</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><div data-component="DragAndDrop" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <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
@@ -147,6 +147,7 @@ page DragAndDropDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page DragAndDropDetail {
       "Standard"
     ]
   }
-]</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><select id="playground-drag-and-drop-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page DragAndDropDetail {
         <div class="demo-workbench">
           <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"><div data-component="DragAndDrop" size="default" title="Drag And Drop example" description="A polished default drag and drop for a modern application." items="[{&quot;id&quot;:&quot;drag-and-drop-0-1&quot;,&quot;key&quot;:&quot;drag-and-drop-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;drag-and-drop-0-2&quot;,&quot;key&quot;:&quot;drag-and-drop-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></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>
           <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>
@@ -399,7 +401,8 @@ page DragAndDropDetail {
         <div class="demo-workbench">
           <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"><div data-component="DragAndDrop" size="sm" title="Compact Drag And Drop" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;drag-and-drop-1-1&quot;,&quot;key&quot;:&quot;drag-and-drop-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;drag-and-drop-1-2&quot;,&quot;key&quot;:&quot;drag-and-drop-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
           <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>
@@ -528,7 +531,8 @@ page DragAndDropDetail {
         <div class="demo-workbench">
           <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"><div data-component="DragAndDrop" size="lg" title="Advanced Drag And Drop" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;drag-and-drop-2-1&quot;,&quot;key&quot;:&quot;drag-and-drop-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;drag-and-drop-2-2&quot;,&quot;key&quot;:&quot;drag-and-drop-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></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>
           <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>
@@ -649,11 +653,38 @@ page DragAndDropDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dragStart</code><span>Fires when the component emits the drag Start event.</span></div><div><code>@dragEnd</code><span>Fires when the component emits the drag End event.</span></div><div><code>@dragEnter</code><span>Fires when the component emits the drag Enter event.</span></div><div><code>@dragLeave</code><span>Fires when the component emits the drag Leave event.</span></div><div><code>@drop</code><span>Fires when the component emits the drop event.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dragStart</code><span>Fires when the component emits the dragStart event.</span></div><div><code>@dragEnd</code><span>Fires when the component emits the dragEnd event.</span></div><div><code>@dragEnter</code><span>Fires when the component emits the dragEnter event.</span></div><div><code>@dragLeave</code><span>Fires when the component emits the dragLeave event.</span></div><div><code>@drop</code><span>Fires when the component emits the drop event.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</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;DragAndDrop
+  @dragStart='console.log(event.detail)'
+  @dragEnd='console.log(event.detail)'
+  @dragEnter='console.log(event.detail)'
+  @dragLeave='console.log(event.detail)'
+  @drop='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"DragAndDrop\"], [data-component=\"DragAndDrop\"]")
 
-component.addEventListener('dragStart', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("dragStart", (event) =&gt; &#123;
+  console.log("dragStart", event.detail)
+&#125;)
+
+component?.addEventListener("dragEnd", (event) =&gt; &#123;
+  console.log("dragEnd", event.detail)
+&#125;)
+
+component?.addEventListener("dragEnter", (event) =&gt; &#123;
+  console.log("dragEnter", event.detail)
+&#125;)
+
+component?.addEventListener("dragLeave", (event) =&gt; &#123;
+  console.log("dragLeave", event.detail)
+&#125;)
+
+component?.addEventListener("drop", (event) =&gt; &#123;
+  console.log("drop", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>"Drag And Drop"</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>string</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">

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

@@ -1,20 +1,21 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page FeatureGridDetail {
   layout = "showcase"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
-  state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
-  state playground_mobileColumns = ctx.url.searchParams.get("pg_mobileColumns") ?? "1"
+  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"
+  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 = "Responsive equal-height grid for feature and service cards."
+    description = "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -24,28 +25,175 @@ page FeatureGridDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Feature Grid</h1>
-        <p>Responsive equal-height grid for feature and service cards.</p>
-        <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p>
+        <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>0 events</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">
+    <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><div data-component="FeatureGrid" color="{playground_color}" size="{playground_size}" columns="{playground_columns}" tabletColumns="{playground_tabletColumns}" mobileColumns="{playground_mobileColumns}" gap="{playground_gap}" minItemWidth="{playground_minItemWidth}" equalHeight="{playground_equalHeight}" align="{playground_align}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><FeatureGrid 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='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
   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>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-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-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-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="sm">sm</option><option value="lg">lg</option><option value="xl">xl</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></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="lg">lg</option><option value="xl">xl</option></select></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>
+          <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-feature-grid-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-feature-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+  }
+]</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>
@@ -54,70 +202,203 @@ page FeatureGridDetail {
         <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>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"><div data-component="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><FeatureGrid 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="Production default usage">
+          <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='[
+    &#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;
+  ]'
+  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">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>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"><div data-component="FeatureGrid" size="sm" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="center" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><FeatureGrid 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 application usage">
+          <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='[
+    &#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;,
+    &#123;
+      "icon": "icon-[lucide--file-check-2]",
+      "title": "Certificates",
+      "description": "Request and track certificates online.",
+      "href": "#certificates",
+      "color": "warning"
+    &#125;
+  ]'
+  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">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>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"><div data-component="FeatureGrid" size="lg" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="end" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><FeatureGrid 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="Rich configuration usage">
+          <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='[
+    &#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;
+  ]'
+  gap="xl"
+  minItemWidth="18rem"
   align="end"
+  maxWidth="wide"
+  variant="panel"
+  label="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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>items</code></td><td>string</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">Production default</a><a href="#feature-grid-demo-2">Compact application</a><a href="#feature-grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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/grid"><small>Next</small><strong>Grid →</strong></a>
+      <a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
     </nav>
   }
 }

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

@@ -17,27 +17,27 @@ page FeatureIconCardDetail {
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Feature Icon Card"
-    description = "Feature card with a prominent themed icon treatment."
+    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="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Feature Icon Card</span>
+      <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">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Feature Icon Card</h1>
-        <p>Feature card with a prominent themed icon treatment.</p>
+        <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 events</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">
+    <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><div data-component="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 slot="footer" class="showcase-slot">footer slot</div></div></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
@@ -46,14 +46,17 @@ page FeatureIconCardDetail {
   href="#feature-icon-card-demo"
   actionLabel="Feature Icon Card"
   align="start"&gt;
-  &lt;!-- Add default, footer slot content here --&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><input id="playground-feature-icon-card-iconVariant" name="pg_iconVariant" type="text" value="soft" /></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="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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</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="end">end</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="shadow">shadow</option><option value="border">border</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>
+          <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>
@@ -62,84 +65,98 @@ page FeatureIconCardDetail {
         <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>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"><div data-component="FeatureIconCard" icon="" 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" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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="Production default usage">
+          <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
-  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"
+  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;!-- Add default, footer slot content here --&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">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>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"><div data-component="FeatureIconCard" icon="icon-[lucide--arrow-right]" title="Compact Feature Icon Card" description="A compact configuration for dashboards and dense product surfaces." href="#feature-icon-card-demo" actionLabel="Compact example" size="sm" variant="secondary" align="center" class="showcase-instance showcase-instance--2"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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="Compact application usage">
+          <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--arrow-right]"
-  title="Compact Feature Icon Card"
-  description="A compact configuration for dashboards and dense product surfaces."
+  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="sm"
+  size="compact"
+  color="info"
   variant="secondary"
   align="center"&gt;
-  &lt;!-- Add default, footer slot content here --&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">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>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"><div data-component="FeatureIconCard" icon="icon-[lucide--trash-2]" title="Advanced Feature Icon Card" description="A richer configuration demonstrating additional content and hierarchy." href="#feature-icon-card-demo" actionLabel="Advanced example" size="lg" variant="success" align="end" class="showcase-instance showcase-instance--3"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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="Rich configuration usage">
+          <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--trash-2]"
-  title="Advanced Feature Icon Card"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  href="#feature-icon-card-demo"
-  actionLabel="Advanced example"
+  icon="icon-[lucide--workflow]"
+  title="Composable workflows"
+  description="Connect forms, services, data, and actions without duplicating UI."
+  href="#workflows"
+  actionLabel="Explore workflows"
   size="lg"
-  variant="success"
+  color="success"
+  variant="raised"
   align="end"&gt;
-  &lt;!-- Add default, footer slot content here --&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="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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">Production default</a><a href="#feature-icon-card-demo-2">Compact application</a><a href="#feature-icon-card-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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">

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

@@ -3,13 +3,13 @@ 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") ?? "Uploading archive"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "42"
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
-  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "design-system.zip"
-  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "20 MB"
-  state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "8.4 MB"
+  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_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_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"
@@ -31,29 +31,27 @@ page FileUploadProgressDetail {
       </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="FileUploadProgress" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileUploadProgress" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="cancel,retry,complete">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure File Upload Progress</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><div data-component="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>
+          <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>
           <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="Uploading archive"
-  value="42"
-  fileName="design-system.zip"
-  fileSize="20 MB"
-  uploadedSize="8.4 MB"
+  label="File Upload Progress"
+  value="36"
   cancelLabel="File Upload Progress"
   retryLabel="File Upload Progress"
 /&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 <code>event.detail</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="Uploading archive" /></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="42" /></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="design-system.zip" /></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="20 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="8.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="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>
+          <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>
         </form>
       </div>
     </section>
@@ -62,22 +60,20 @@ page FileUploadProgressDetail {
         <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">Basic usage</span><h2>Uploading file</h2><p>Show an active upload with file metadata and a cancel action.</p></div>
+          <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="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"><div data-component="FileUploadProgress" size="default" label="Uploading archive" value="42" max="100" showValue="true" fileName="design-system.zip" fileSize="20 MB" uploadedSize="8.4 MB" status="uploading" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1"></div></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>
-          <section class="demo-code" aria-label="Uploading file usage">
+          <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="Uploading archive"
-  value="42"
-  fileName="design-system.zip"
-  fileSize="20 MB"
-  uploadedSize="8.4 MB"
+  label="File Upload Progress"
+  value="36"
   cancelLabel="File Upload Progress"
   retryLabel="File Upload Progress"
 /&gt;</code></pre>
@@ -86,23 +82,21 @@ page FileUploadProgressDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Progress</span><h2>Starting upload</h2><p>Communicate that a newly queued file has begun uploading.</p></div>
+          <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="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"><div data-component="FileUploadProgress" size="sm" label="Preparing upload" value="2" max="100" showValue="true" fileName="product-images.tar" fileSize="48 MB" uploadedSize="640 KB" status="uploading" cancelLabel="Compact example" retryLabel="Compact example" class="showcase-instance showcase-instance--2"></div></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>
-          <section class="demo-code" aria-label="Starting upload usage">
+          <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="Preparing upload"
-  value="2"
-  fileName="product-images.tar"
-  fileSize="48 MB"
-  uploadedSize="640 KB"
+  label="Compact example"
+  value="60"
   cancelLabel="Compact example"
   retryLabel="Compact example"
 /&gt;</code></pre>
@@ -111,121 +105,53 @@ page FileUploadProgressDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Progress</span><h2>Nearly complete</h2><p>Keep progress and transferred size readable near completion.</p></div>
+          <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="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"><div data-component="FileUploadProgress" size="lg" label="Uploading video" value="92" max="100" showValue="true" fileName="launch-video.mp4" fileSize="200 MB" uploadedSize="184 MB" status="uploading" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></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>
-          <section class="demo-code" aria-label="Nearly complete usage">
+          <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="Uploading video"
-  value="92"
-  fileName="launch-video.mp4"
-  fileSize="200 MB"
-  uploadedSize="184 MB"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Upload complete</h2><p>Confirm a successful upload with a clear completion state.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-upload-progress-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Uploaded successfully" value="100" max="100" showValue="true" fileName="quarterly-report.pdf" fileSize="4.8 MB" uploadedSize="4.8 MB" status="complete" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--4"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Upload complete 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="Uploaded successfully"
-  value="100"
-  fileName="quarterly-report.pdf"
-  fileSize="4.8 MB"
-  uploadedSize="4.8 MB"
-  status="complete"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Upload failed</h2><p>Explain failure and provide a retry action.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-upload-progress-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Network connection lost" value="33" max="100" showValue="true" fileName="customer-export.csv" fileSize="36 MB" uploadedSize="12 MB" status="error" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--5"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Upload failed 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="Network connection lost"
-  value="33"
-  fileName="customer-export.csv"
-  fileSize="36 MB"
-  uploadedSize="12 MB"
-  status="error"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Upload cancelled</h2><p>Preserve file context and allow a cancelled upload to restart.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-upload-progress-demo-6" class="demo-canvas demo-canvas--6">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Upload cancelled" value="22" max="100" showValue="true" fileName="brand-assets.fig" fileSize="72 MB" uploadedSize="16 MB" status="cancelled" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--6"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Upload cancelled 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="Upload cancelled"
-  value="22"
-  fileName="brand-assets.fig"
-  fileSize="72 MB"
-  uploadedSize="16 MB"
-  status="cancelled"
+  label="Advanced example"
+  value="84"
   cancelLabel="Advanced example"
   retryLabel="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@retry</code><span>Fires when the component emits the retry event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@cancel</code><span>Fires when the user cancels or dismisses the current workflow.</span></div><div><code>@retry</code><span>Fires when the component emits the retry event.</span></div><div><code>@complete</code><span>Fires when the component emits the complete event.</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;FileUploadProgress
+  @cancel='console.log(event.detail)'
+  @retry='console.log(event.detail)'
+  @complete='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"FileUploadProgress\"], [data-component=\"FileUploadProgress\"]")
 
-component.addEventListener('cancel', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("cancel", (event) =&gt; &#123;
+  console.log("cancel", event.detail)
+&#125;)
+
+component?.addEventListener("retry", (event) =&gt; &#123;
+  console.log("retry", event.detail)
+&#125;)
+
+component?.addEventListener("complete", (event) =&gt; &#123;
+  console.log("complete", event.detail)
+&#125;)</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>
       </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">Uploading file</a><a href="#file-upload-progress-demo-2">Starting upload</a><a href="#file-upload-progress-demo-3">Nearly complete</a><a href="#file-upload-progress-demo-4">Upload complete</a><a href="#file-upload-progress-demo-5">Upload failed</a><a href="#file-upload-progress-demo-6">Upload cancelled</a><a href="#events">Events</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-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">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/device-frame"><small>Previous</small><strong>← Device Frame</strong></a>
-      <a href="/components/hero-actions"><small>Next</small><strong>Hero Actions →</strong></a>
+      <a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
     </nav>
   }
 }

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

@@ -5,7 +5,7 @@ page FileUploadDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "File Upload example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default file upload for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"file-upload-0-1\",\n    \"key\": \"file-upload-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#file-upload-demo\",\n    \"actionHref\": \"#file-upload-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"file-upload-0-2\",\n    \"key\": \"file-upload-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#file-upload-demo\",\n    \"actionHref\": \"#file-upload-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"file-upload-0-1\",\"key\":\"file-upload-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\":\"#file-upload-demo\",\"actionHref\":\"#file-upload-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\":\"file-upload-0-2\",\"key\":\"file-upload-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#file-upload-demo\",\"actionHref\":\"#file-upload-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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page FileUploadDetail {
       </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="FileUpload" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileUpload" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,upload,progress,success,error,cancel,remove">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure File Upload</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><div data-component="FileUpload" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><FileUpload 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;FileUpload
@@ -147,6 +147,7 @@ page FileUploadDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page FileUploadDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-file-upload-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-file-upload-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-file-upload-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-file-upload-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-file-upload-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-file-upload-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page FileUploadDetail {
         <div class="demo-workbench">
           <div id="file-upload-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 data-component="FileUpload" size="default" title="File Upload example" description="A polished default file upload for a modern application." items="[{&quot;id&quot;:&quot;file-upload-0-1&quot;,&quot;key&quot;:&quot;file-upload-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;file-upload-0-2&quot;,&quot;key&quot;:&quot;file-upload-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><FileUpload size="default" title="File Upload example" description="A polished default file upload for a modern application." items='[{"id":"file-upload-0-1","key":"file-upload-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":"#file-upload-demo","actionHref":"#file-upload-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":"file-upload-0-2","key":"file-upload-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#file-upload-demo","actionHref":"#file-upload-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>
           <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>
@@ -399,7 +401,8 @@ page FileUploadDetail {
         <div class="demo-workbench">
           <div id="file-upload-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"><div data-component="FileUpload" size="sm" title="Compact File Upload" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;file-upload-1-1&quot;,&quot;key&quot;:&quot;file-upload-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;file-upload-1-2&quot;,&quot;key&quot;:&quot;file-upload-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><FileUpload size="sm" title="Compact File Upload" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"file-upload-1-1","key":"file-upload-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":"#file-upload-demo","actionHref":"#file-upload-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":"file-upload-1-2","key":"file-upload-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#file-upload-demo","actionHref":"#file-upload-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>
@@ -528,7 +531,8 @@ page FileUploadDetail {
         <div class="demo-workbench">
           <div id="file-upload-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"><div data-component="FileUpload" size="lg" title="Advanced File Upload" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;file-upload-2-1&quot;,&quot;key&quot;:&quot;file-upload-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;file-upload-2-2&quot;,&quot;key&quot;:&quot;file-upload-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><FileUpload size="lg" title="Advanced File Upload" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"file-upload-2-1","key":"file-upload-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":"#file-upload-demo","actionHref":"#file-upload-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":"file-upload-2-2","key":"file-upload-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":"#file-upload-demo","actionHref":"#file-upload-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>
@@ -649,11 +653,43 @@ page FileUploadDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@upload</code><span>Fires when the component emits the upload event.</span></div><div><code>@progress</code><span>Fires as an operation reports progress.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@remove</code><span>Fires when the component emits the remove event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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>@upload</code><span>Fires when the component emits the upload event.</span></div><div><code>@progress</code><span>Fires when the component emits the progress event.</span></div><div><code>@success</code><span>Fires when the component emits the success event.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div><div><code>@cancel</code><span>Fires when the user cancels or dismisses the current workflow.</span></div><div><code>@remove</code><span>Fires when the component emits the remove event.</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;FileUpload
+  @select='console.log(event.detail)'
+  @upload='console.log(event.detail)'
+  @progress='console.log(event.detail)'
+  @success='console.log(event.detail)'
+  @error='console.log(event.detail)'
+  @cancel='console.log(event.detail)'
+  @remove='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"FileUpload\"], [data-component=\"FileUpload\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("upload", (event) =&gt; &#123;
+  console.log("upload", event.detail)
+&#125;)
+
+component?.addEventListener("progress", (event) =&gt; &#123;
+  console.log("progress", event.detail)
+&#125;)
+
+component?.addEventListener("success", (event) =&gt; &#123;
+  console.log("success", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)
+
+component?.addEventListener("cancel", (event) =&gt; &#123;
+  console.log("cancel", event.detail)
+&#125;)
+
+component?.addEventListener("remove", (event) =&gt; &#123;
+  console.log("remove", event.detail)
+&#125;)</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>"File Upload"</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>string</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">

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

@@ -4,34 +4,34 @@ page FooterDetail {
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"footer-0-1\",\n    \"key\": \"footer-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#footer-demo\",\n    \"actionHref\": \"#footer-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"footer-0-2\",\n    \"key\": \"footer-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#footer-demo\",\n    \"actionHref\": \"#footer-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "compact"
+  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 = "Responsive application footer with structured links and pre/post content slots."
+    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="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Footer</span>
+      <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">Navigation component</span>
+        <span class="showcase-eyebrow">Layout component</span>
         <h1>Footer</h1>
-        <p>Responsive application footer with structured links and pre/post content slots.</p>
+        <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 events</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">
+    <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><div data-component="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 slot="pre-footer" class="showcase-slot">pre-footer slot</div><div slot="post-footer" class="showcase-slot">post-footer slot</div><div slot="copyright-left" class="showcase-slot">copyright-left slot</div><div slot="copyright-right" class="showcase-slot">copyright-right slot</div></div></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
@@ -144,121 +144,98 @@ page FooterDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&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 <code>event.detail</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="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>string</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <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>string</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "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",
+    "type": "header",
+    "label": "Product",
+    "description": "Build consistent interfaces with WRNexusJS.",
     "items": [
       {
-        "label": "Nested option A",
-        "value": "nested-a"
+        "label": "Components",
+        "href": "/base"
       },
       {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
+        "label": "Themes",
+        "href": "/themes"
       },
       {
-        "label": "API reference",
-        "href": "#api-reference"
+        "label": "Examples",
+        "href": "/blocks"
       }
-    ],
-    "values": [
-      "Included",
-      "Standard"
     ]
   },
   {
-    "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",
+    "type": "header",
+    "label": "Developers",
     "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
       {
         "label": "Documentation",
-        "href": "#documentation"
+        "href": "/docs"
       },
       {
-        "label": "API reference",
-        "href": "#api-reference"
+        "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
       }
-    ],
-    "values": [
-      "Included",
-      "Standard"
     ]
   }
-]</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="3" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-footer-maxWidth" name="pg_maxWidth" type="text" value="compact" /></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>
+]</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>
@@ -267,401 +244,330 @@ page FooterDetail {
         <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>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"><div data-component="Footer" size="default" label="Footer" items="[{&quot;id&quot;:&quot;footer-0-1&quot;,&quot;key&quot;:&quot;footer-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;footer-0-2&quot;,&quot;key&quot;:&quot;footer-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="3" class="showcase-instance showcase-instance--1"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></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="Production default usage">
+          <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='[
     &#123;
-      "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",
+      "type": "header",
+      "label": "Product",
+      "description": "Build consistent interfaces with WRNexusJS.",
       "items": [
         &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Components",
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Themes",
+          "href": "/themes"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Examples",
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;,
     &#123;
-      "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",
+      "type": "header",
+      "label": "Developers",
       "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"
+          "href": "/docs"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "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;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;
-  ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  ]'
+  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">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>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"><div data-component="Footer" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;footer-1-1&quot;,&quot;key&quot;:&quot;footer-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;footer-1-2&quot;,&quot;key&quot;:&quot;footer-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="3" class="showcase-instance showcase-instance--2"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></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 usage">
+          <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="sm"
+  size="compact"
   label="Compact example"
   items='[
     &#123;
-      "id": "footer-1-1",
-      "key": "footer-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": "#footer-demo",
-      "actionHref": "#footer-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",
+      "type": "header",
+      "label": "Product",
+      "description": "Build consistent interfaces with WRNexusJS.",
       "items": [
         &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Components",
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Themes",
+          "href": "/themes"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Examples",
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "footer-1-2",
-      "key": "footer-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-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",
+      "type": "header",
+      "label": "Developers",
       "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"
+          "href": "/docs"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "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;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;
-  ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  ]'
+  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">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>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"><div data-component="Footer" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;footer-2-1&quot;,&quot;key&quot;:&quot;footer-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;footer-2-2&quot;,&quot;key&quot;:&quot;footer-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" columns="3" class="showcase-instance showcase-instance--3"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></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="Rich configuration usage">
+          <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="lg"
+  size="spacious"
   label="Advanced example"
   items='[
     &#123;
-      "id": "footer-2-1",
-      "key": "footer-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": "#footer-demo",
-      "actionHref": "#footer-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",
+      "type": "header",
+      "label": "Product",
+      "description": "Build consistent interfaces with WRNexusJS.",
       "items": [
         &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Components",
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Themes",
+          "href": "/themes"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Examples",
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     &#125;,
     &#123;
-      "id": "footer-2-2",
-      "key": "footer-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": "#footer-demo",
-      "actionHref": "#footer-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",
+      "type": "header",
+      "label": "Developers",
       "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"
+          "href": "/docs"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "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;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     &#125;
-  ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  ]'
+  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 events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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(event.detail)'
+  @action='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Footer\"], [data-component=\"Footer\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)</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>string</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">Production default</a><a href="#footer-demo-2">Compact application</a><a href="#footer-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
-      <a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</strong></a>
+      <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

@@ -3,13 +3,13 @@ page GridDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   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 = "Grid"
-    description = "Theme-aware, responsive grid component."
+    description = "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,26 +19,27 @@ page GridDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Grid</h1>
-        <p>Theme-aware, responsive grid component.</p>
+        <p>Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.</p>
         <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</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="Grid" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Grid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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><div data-component="Grid" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Grid size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></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;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>6 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-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-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><option value="compact">compact</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-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-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-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-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-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-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -47,65 +48,78 @@ page GridDetail {
         <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>Responsive three-column grid</h2><p>Arrange equal-width children with consistent gaps.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="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"><div data-component="Grid" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Responsive three-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;Grid /&gt;</code></pre>
+            <pre><code>&lt;Grid
+  columns="3"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/div&gt;
+&lt;/Grid&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>Dense four-column grid</h2><p>Use smaller gaps for dashboards and compact overview pages.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="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"><div data-component="Grid" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Dense 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;Grid
-  size="sm"
-/&gt;</code></pre>
+  size="compact"
+  columns="4"
+  gap="sm"
+  maxWidth="wide"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;span&gt;Four&lt;/span&gt;&lt;/div&gt;
+&lt;/Grid&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width two-column grid</h2><p>Use larger gaps for editorial or marketing split layouts.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="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"><div data-component="Grid" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width two-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;Grid
-  size="lg"
-/&gt;</code></pre>
+  size="spacious"
+  gap="xl"
+  maxWidth="full"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;Primary&lt;/span&gt;&lt;span&gt;Secondary&lt;/span&gt;&lt;/div&gt;
+&lt;/Grid&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>columns</code></td><td>number</td><td><code>2</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>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="#grid-demo-1">Production default</a><a href="#grid-demo-2">Compact application</a><a href="#grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#grid-demo-1">Responsive three-column grid</a><a href="#grid-demo-2">Dense four-column grid</a><a href="#grid-demo-3">Full-width two-column grid</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/footer"><small>Previous</small><strong>← Footer</strong></a>
       <a href="/components/image"><small>Next</small><strong>Image →</strong></a>
     </nav>
   }

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

@@ -1,37 +1,37 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page HeroActionsDetail {
   layout = "showcase"
-  state playground_actions = ctx.url.searchParams.get("pg_actions") ?? "[\n  {\n    \"id\": \"hero-actions-0-1\",\n    \"key\": \"hero-actions-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#hero-actions-demo\",\n    \"actionHref\": \"#hero-actions-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"hero-actions-0-2\",\n    \"key\": \"hero-actions-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#hero-actions-demo\",\n    \"actionHref\": \"#hero-actions-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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"
-  state playground_fullWidthMobile = ctx.url.searchParams.get("pg_fullWidthMobile") ?? "true"
+  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 = "Responsive action group for hero and call-to-action sections."
+    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="/base">Base</a><span aria-hidden="true">/</span><span>Hero Actions</span>
+      <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">Base component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Hero Actions</h1>
-        <p>Responsive action group for hero and call-to-action sections.</p>
+        <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 events</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">
+    <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><div data-component="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></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
@@ -147,117 +147,24 @@ page HeroActionsDetail {
 /&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>string</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
   {
-    "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": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
+    "label": "Browse components",
+    "href": "#components",
+    "icon": "icon-[lucide--blocks]",
+    "variant": "primary"
   },
   {
-        "label": "Nested option B",
-        "value": "nested-b"
+    "label": "View metrics",
+    "href": "#metrics",
+    "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+    "variant": "outline"
   }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  },
-  {
-    "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": [
-      {
-        "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"
-    ]
-  }
-]</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="end">end</option><option value="right">right</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="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-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>
+]</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>
@@ -266,249 +173,62 @@ page HeroActionsDetail {
         <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>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"><div data-component="HeroActions" actions="[{&quot;id&quot;:&quot;hero-actions-0-1&quot;,&quot;key&quot;:&quot;hero-actions-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;hero-actions-0-2&quot;,&quot;key&quot;:&quot;hero-actions-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" align="start" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1"></div></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="Production default usage">
+          <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='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Browse components",
+      "href": "#components",
+      "icon": "icon-[lucide--blocks]",
+      "variant": "primary"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "hero-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": [
-        &#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": "View metrics",
+      "href": "#metrics",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+      "variant": "outline"
     &#125;
   ]'
-  align="start"
 /&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>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"><div data-component="HeroActions" actions="[{&quot;id&quot;:&quot;hero-actions-1-1&quot;,&quot;key&quot;:&quot;hero-actions-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;hero-actions-1-2&quot;,&quot;key&quot;:&quot;hero-actions-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" align="center" stackOnMobile="true" fullWidthMobile="true" size="sm" class="showcase-instance showcase-instance--2"></div></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="Compact application usage">
+          <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='[
     &#123;
-      "id": "hero-actions-1-1",
-      "key": "hero-actions-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": "#hero-actions-demo",
-      "actionHref": "#hero-actions-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Browse components",
+      "href": "#components",
+      "icon": "icon-[lucide--blocks]",
+      "variant": "primary"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "hero-actions-1-2",
-      "key": "hero-actions-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-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": [
-        &#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": "View metrics",
+      "href": "#metrics",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+      "variant": "outline"
     &#125;
   ]'
   align="center"
@@ -519,141 +239,55 @@ page HeroActionsDetail {
       </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>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"><div data-component="HeroActions" actions="[{&quot;id&quot;:&quot;hero-actions-2-1&quot;,&quot;key&quot;:&quot;hero-actions-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;hero-actions-2-2&quot;,&quot;key&quot;:&quot;hero-actions-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" align="end" stackOnMobile="true" fullWidthMobile="true" size="lg" class="showcase-instance showcase-instance--3"></div></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="Rich configuration usage">
+          <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='[
     &#123;
-      "id": "hero-actions-2-1",
-      "key": "hero-actions-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": "#hero-actions-demo",
-      "actionHref": "#hero-actions-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Browse components",
+      "href": "#components",
+      "icon": "icon-[lucide--blocks]",
+      "variant": "primary"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "View metrics",
+      "href": "#metrics",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+      "variant": "outline"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    &#125;,
-    &#123;
-      "id": "hero-actions-2-2",
-      "key": "hero-actions-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": "#hero-actions-demo",
-      "actionHref": "#hero-actions-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": [
-        &#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",
-        "Unlimited"
-      ]
+      "label": "Contact support",
+      "href": "#support",
+      "icon": "icon-[lucide--life-buoy]",
+      "variant": "ghost"
     &#125;
   ]'
   align="end"
+  orientation="vertical"
   size="lg"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>actions</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>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">Production default</a><a href="#hero-actions-demo-2">Compact application</a><a href="#hero-actions-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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/file-upload-progress"><small>Previous</small><strong>← File Upload Progress</strong></a>
-      <a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
+      <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/image.wrn

@@ -8,11 +8,11 @@ page ImageDetail {
   state playground_width = ctx.url.searchParams.get("pg_width") ?? ""
   state playground_height = ctx.url.searchParams.get("pg_height") ?? ""
   state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
-  state playground_rounded = ctx.url.searchParams.get("pg_rounded") ?? "false"
+  state playground_rounded = (ctx.url.searchParams.get("pg_rounded") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Image"
-    description = "Theme-aware, responsive image component."
+    description = "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -22,26 +22,27 @@ page ImageDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Image</h1>
-        <p>Theme-aware, responsive image component.</p>
+        <p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</p>
         <div class="detail-badges"><span>9 props</span><span>1 slots</span><span>0 events</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="Image" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Image" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Image</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><div data-component="Image" size="{playground_size}" color="{playground_color}" src="{playground_src}" alt="{playground_alt}" width="{playground_width}" height="{playground_height}" loading="{playground_loading}" rounded="{playground_rounded}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Image size='{playground_size}' color='{playground_color}' src='{playground_src}' alt='{playground_alt}' width='{playground_width}' height='{playground_height}' loading='{playground_loading}' rounded='{playground_rounded}' 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;Image /&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>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-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-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><option value="square">square</option><option value="video">video</option><option value="landscape">landscape</option><option value="portrait">portrait</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-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-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><input id="playground-image-width" name="pg_width" type="text" value="" /></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-image-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-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-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-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-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><select id="playground-image-width" name="pg_width"><option value="" selected>Auto / default</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option><option value="full">full</option></select></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><select id="playground-image-loading" name="pg_loading"><option value="lazy" selected>lazy</option><option value="eager">eager</option></select></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -50,61 +51,80 @@ page ImageDetail {
         <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>Responsive content image</h2><p>Render a responsive image with meaningful alternative text.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="image-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 data-component="Image" size="default" rounded="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Image size="default" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 800 450&#39;%3E%3Crect width=&#39;800&#39; height=&#39;450&#39; fill=&#39;%231e1b4b&#39;/%3E%3Ccircle cx=&#39;400&#39; cy=&#39;225&#39; r=&#39;120&#39; fill=&#39;%237c3aed&#39;/%3E%3C/svg%3E" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Responsive content image 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;Image /&gt;</code></pre>
+            <pre><code>&lt;Image
+  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E"
+  alt="Abstract violet circle on a dark surface"
+  width="800"
+  height="450"
+/&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>Rounded thumbnail</h2><p>Use a rounded image in cards, directories, and compact summaries.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="image-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"><div data-component="Image" size="sm" rounded="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Image size="sm" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 400 400&#39;%3E%3Crect width=&#39;400&#39; height=&#39;400&#39; fill=&#39;%230284c7&#39;/%3E%3Cpath d=&#39;M80 290 190 120l130 170z&#39; fill=&#39;white&#39; opacity=&#39;.7&#39;/%3E%3C/svg%3E" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Rounded thumbnail 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;Image
   size="sm"
+  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E"
+  alt="Abstract blue thumbnail"
+  width="400"
+  height="400"
+  rounded="true"
 /&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Eager hero image</h2><p>Use explicit dimensions and eager loading for an above-the-fold visual.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="image-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"><div data-component="Image" size="lg" rounded="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Image size="lg" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 1200 600&#39;%3E%3Crect width=&#39;1200&#39; height=&#39;600&#39; fill=&#39;%23059669&#39;/%3E%3Crect x=&#39;150&#39; y=&#39;120&#39; width=&#39;900&#39; height=&#39;360&#39; rx=&#39;36&#39; fill=&#39;white&#39; opacity=&#39;.18&#39;/%3E%3C/svg%3E" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Eager hero image 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;Image
   size="lg"
+  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E"
+  alt="Abstract green hero visual"
+  width="1200"
+  height="600"
+  loading="eager"
+  rounded="true"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>rounded</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="#image-demo-1">Production default</a><a href="#image-demo-2">Compact application</a><a href="#image-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#image-demo-1">Responsive content image</a><a href="#image-demo-2">Rounded thumbnail</a><a href="#image-demo-3">Eager hero image</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -22,12 +22,12 @@ page KbdDetail {
       </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="Kbd" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Kbd" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Kbd</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><div data-component="Kbd" size="{playground_size}" color="{playground_color}" label="{playground_label}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Kbd size='{playground_size}' color='{playground_color}' 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;Kbd
@@ -35,6 +35,7 @@ page KbdDetail {
 /&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>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -53,7 +54,8 @@ page KbdDetail {
         <div class="demo-workbench">
           <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"><div data-component="Kbd" size="default" label="Kbd" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Kbd size="default" label="Kbd" 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>
@@ -71,7 +73,8 @@ page KbdDetail {
         <div class="demo-workbench">
           <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"><div data-component="Kbd" size="sm" label="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Kbd size="sm" label="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>
@@ -90,7 +93,8 @@ page KbdDetail {
         <div class="demo-workbench">
           <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"><div data-component="Kbd" size="lg" label="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Kbd size="lg" label="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>
@@ -101,11 +105,11 @@ page KbdDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"⌘ K"</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="#kbd-demo-1">Production default</a><a href="#kbd-demo-2">Compact application</a><a href="#kbd-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#kbd-demo-1">Production default</a><a href="#kbd-demo-2">Compact application</a><a href="#kbd-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -3,7 +3,7 @@ page LayoutSplitterDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -24,21 +24,22 @@ page LayoutSplitterDetail {
       </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="LayoutSplitter" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="LayoutSplitter" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="resizeStart,resize,resizeEnd">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Layout Splitter</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><div data-component="LayoutSplitter" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><LayoutSplitter size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' 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;LayoutSplitter /&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 <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 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-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-layout-splitter-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-layout-splitter-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-layout-splitter-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -53,7 +54,8 @@ page LayoutSplitterDetail {
         <div class="demo-workbench">
           <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"><div data-component="LayoutSplitter" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><LayoutSplitter size="default" columns="2" 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>
@@ -69,7 +71,8 @@ page LayoutSplitterDetail {
         <div class="demo-workbench">
           <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"><div data-component="LayoutSplitter" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><LayoutSplitter size="sm" columns="2" 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>
@@ -87,7 +90,8 @@ page LayoutSplitterDetail {
         <div class="demo-workbench">
           <div id="layout-splitter-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"><div data-component="LayoutSplitter" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><LayoutSplitter size="lg" columns="2" 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>
@@ -97,11 +101,23 @@ page LayoutSplitterDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@resizeStart</code><span>Fires when the component emits the resize Start event.</span></div><div><code>@resize</code><span>Fires when the component emits the resize event.</span></div><div><code>@resizeEnd</code><span>Fires when the component emits the resize End event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@resizeStart</code><span>Fires when the component emits the resizeStart event.</span></div><div><code>@resize</code><span>Fires when the component emits the resize event.</span></div><div><code>@resizeEnd</code><span>Fires when the component emits the resizeEnd event.</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;LayoutSplitter
+  @resizeStart='console.log(event.detail)'
+  @resize='console.log(event.detail)'
+  @resizeEnd='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"LayoutSplitter\"], [data-component=\"LayoutSplitter\"]")
 
-component.addEventListener('resizeStart', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("resizeStart", (event) =&gt; &#123;
+  console.log("resizeStart", event.detail)
+&#125;)
+
+component?.addEventListener("resize", (event) =&gt; &#123;
+  console.log("resize", event.detail)
+&#125;)
+
+component?.addEventListener("resizeEnd", (event) =&gt; &#123;
+  console.log("resizeEnd", event.detail)
+&#125;)</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>columns</code></td><td>number</td><td><code>2</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>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">

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

@@ -5,7 +5,7 @@ page LegendIndicatorDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Legend Indicator example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default legend indicator for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"legend-indicator-0-1\",\n    \"key\": \"legend-indicator-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#legend-indicator-demo\",\n    \"actionHref\": \"#legend-indicator-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"legend-indicator-0-2\",\n    \"key\": \"legend-indicator-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#legend-indicator-demo\",\n    \"actionHref\": \"#legend-indicator-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
   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 {
@@ -25,12 +25,12 @@ page LegendIndicatorDetail {
       </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="LegendIndicator" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="LegendIndicator" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Legend Indicator</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><div data-component="LegendIndicator" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <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
@@ -147,6 +147,7 @@ page LegendIndicatorDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page LegendIndicatorDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-legend-indicator-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-legend-indicator-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-legend-indicator-class"><span><strong>class</strong><small>string</small></span><input id="playground-legend-indicator-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-legend-indicator-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-legend-indicator-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-legend-indicator-class"><span><strong>class</strong><small>string</small></span><input id="playground-legend-indicator-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page LegendIndicatorDetail {
         <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"><div data-component="LegendIndicator" size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items="[{&quot;id&quot;:&quot;legend-indicator-0-1&quot;,&quot;key&quot;:&quot;legend-indicator-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;legend-indicator-0-2&quot;,&quot;key&quot;:&quot;legend-indicator-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></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>
           <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>
@@ -399,7 +401,8 @@ page LegendIndicatorDetail {
         <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"><div data-component="LegendIndicator" size="sm" title="Compact Legend Indicator" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;legend-indicator-1-1&quot;,&quot;key&quot;:&quot;legend-indicator-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;legend-indicator-1-2&quot;,&quot;key&quot;:&quot;legend-indicator-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
@@ -528,7 +531,8 @@ page LegendIndicatorDetail {
         <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"><div data-component="LegendIndicator" size="lg" title="Advanced Legend Indicator" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;legend-indicator-2-1&quot;,&quot;key&quot;:&quot;legend-indicator-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;legend-indicator-2-2&quot;,&quot;key&quot;:&quot;legend-indicator-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></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>
@@ -649,11 +653,18 @@ page LegendIndicatorDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</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;LegendIndicator
+  @toggle='console.log(event.detail)'
+  @select='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"LegendIndicator\"], [data-component=\"LegendIndicator\"]")
 
-component.addEventListener('toggle', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</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>"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>string</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">
@@ -661,7 +672,7 @@ component.addEventListener('toggle', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
+      <a href="/components/file-upload-progress"><small>Previous</small><strong>← File Upload Progress</strong></a>
       <a href="/components/list"><small>Next</small><strong>List →</strong></a>
     </nav>
   }

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

@@ -7,11 +7,11 @@ page LinkDetail {
   state playground_href = ctx.url.searchParams.get("pg_href") ?? "#link-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"
+  state playground_external = (ctx.url.searchParams.get("pg_external") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Link"
-    description = "Theme-aware, responsive link component."
+    description = "Render an accessible internal or external link with target, relation, size, color, and public focus or click events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,17 +21,17 @@ page LinkDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Link</h1>
-        <p>Theme-aware, responsive link component.</p>
+        <p>Render an accessible internal or external link with target, relation, size, color, and public focus or click events.</p>
         <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</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="Link" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Link" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Link</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><div data-component="Link" size="{playground_size}" color="{playground_color}" label="{playground_label}" href="{playground_href}" target="{playground_target}" rel="{playground_rel}" external="{playground_external}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Link size='{playground_size}' color='{playground_color}' label='{playground_label}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' 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;Link
@@ -39,10 +39,11 @@ page LinkDetail {
 /&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-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-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-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-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><option value="neutral">neutral</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-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-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-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-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-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-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-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-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -51,72 +52,79 @@ page LinkDetail {
         <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>Standard navigation link</h2><p>Use for routes within the current application.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="link-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 data-component="Link" size="default" label="Link" href="#link-demo" external="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Standard navigation link 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;Link
-  href="#link-demo"
+  label="Open components"
+  href="/base"
 /&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>External resource link</h2><p>Communicate external navigation and use safe target attributes.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="link-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"><div data-component="Link" size="sm" label="Compact example" href="#link-demo" external="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="External resource link 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;Link
   size="sm"
-  label="Compact example"
-  href="#link-demo"
+  label="WRNexusJS documentation"
+  href="https://wrnexusjs.dev"
+  target="_blank"
+  external="true"
 /&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large emphasized link</h2><p>Use a larger link in empty states, promotional cards, and resource lists.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="link-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"><div data-component="Link" size="lg" label="Advanced example" href="#link-demo" external="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Large emphasized link 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;Link
   size="lg"
-  label="Advanced example"
-  href="#link-demo"
+  color="info"
+  label="Explore framework guides"
+  href="/framework-guides"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"Link"</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>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="#link-demo-1">Production default</a><a href="#link-demo-2">Compact application</a><a href="#link-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#link-demo-1">Standard navigation link</a><a href="#link-demo-2">External resource link</a><a href="#link-demo-3">Large emphasized link</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/layout-splitter"><small>Previous</small><strong>← Layout Splitter</strong></a>
-      <a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a>
+      <a href="/components/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
     </nav>
   }
 }

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

@@ -5,7 +5,7 @@ page ListGroupDetail {
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"list-group-0-1\",\n    \"key\": \"list-group-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#list-group-demo\",\n    \"actionHref\": \"#list-group-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"list-group-0-2\",\n    \"key\": \"list-group-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#list-group-demo\",\n    \"actionHref\": \"#list-group-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ListGroupDetail {
       </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="ListGroup" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ListGroup" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure List Group</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><div data-component="ListGroup" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></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>
           <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
@@ -147,6 +147,7 @@ page ListGroupDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page ListGroupDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-group-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ListGroupDetail {
         <div class="demo-workbench">
           <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"><div data-component="ListGroup" size="default" title="List Group example" description="A polished default list group for a modern application." items="[{&quot;id&quot;:&quot;list-group-0-1&quot;,&quot;key&quot;:&quot;list-group-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-group-0-2&quot;,&quot;key&quot;:&quot;list-group-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></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>
           <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>
@@ -399,7 +401,8 @@ page ListGroupDetail {
         <div class="demo-workbench">
           <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"><div data-component="ListGroup" size="sm" title="Compact List Group" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;list-group-1-1&quot;,&quot;key&quot;:&quot;list-group-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-group-1-2&quot;,&quot;key&quot;:&quot;list-group-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
           <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>
@@ -528,7 +531,8 @@ page ListGroupDetail {
         <div class="demo-workbench">
           <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"><div data-component="ListGroup" size="lg" title="Advanced List Group" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;list-group-2-1&quot;,&quot;key&quot;:&quot;list-group-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;list-group-2-2&quot;,&quot;key&quot;:&quot;list-group-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></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>
           <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>
@@ -649,11 +653,18 @@ page ListGroupDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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>@change</code><span>Fires when the component's committed value or selection changes.</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;ListGroup
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ListGroup\"], [data-component=\"ListGroup\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>string</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">

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

@@ -5,12 +5,12 @@ page ListDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "List example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"list-0-1\",\n    \"key\": \"list-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#list-demo\",\n    \"actionHref\": \"#list-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"list-0-2\",\n    \"key\": \"list-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#list-demo\",\n    \"actionHref\": \"#list-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"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\":[{\"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-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\":[{\"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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "List"
-    description = "Theme-aware, responsive list component."
+    description = "Present structured responsive linked or status items with icons, descriptions, actions, and selection events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page ListDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Base component</span>
         <h1>List</h1>
-        <p>Theme-aware, responsive list component.</p>
+        <p>Present structured responsive linked or status items with icons, descriptions, actions, and selection events.</p>
         <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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="List" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="List" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure List</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><div data-component="List" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <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
@@ -147,10 +147,11 @@ page ListDetail {
 /&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>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="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-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "list-0-1",
     "key": "list-0-1",
@@ -257,7 +258,7 @@ page ListDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="divided">divided</option><option value="card">card</option><option value="separated">separated</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,35 @@ page ListDetail {
         <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>Linked resource list</h2><p>Present related links with supporting descriptions and icons.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="list-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 data-component="List" size="default" title="List example" description="A polished default list for a modern application." items="[{&quot;id&quot;:&quot;list-0-1&quot;,&quot;key&quot;:&quot;list-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-0-2&quot;,&quot;key&quot;:&quot;list-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' 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="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="List example"
-  description="A polished default list for a modern application."
+  title="Citizen resources"
+  description="Commonly requested public information."
   items='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Report crime",
+      "href": "#report",
+      "icon": "icon-[lucide--shield-alert]"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Track complaint",
+      "href": "#track",
+      "icon": "icon-[lucide--scan-search]"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "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": [
-        &#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": "Certificates",
+      "href": "#certificates",
+      "icon": "icon-[lucide--file-check-2]"
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,267 +304,81 @@ page ListDetail {
       </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>Compact status list</h2><p>Use a dense list in sidebars, dashboards, and record panels.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="list-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"><div data-component="List" size="sm" title="Compact List" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;list-1-1&quot;,&quot;key&quot;:&quot;list-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-1-2&quot;,&quot;key&quot;:&quot;list-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <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="Compact List"
+  title="Current status"
   description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "id": "list-1-1",
-      "key": "list-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-demo",
-      "actionHref": "#list-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Application received",
+      "status": "Complete"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Verification",
+      "status": "In progress"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "list-1-2",
-      "key": "list-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-demo",
-      "actionHref": "#list-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": [
-        &#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": "Decision",
+      "status": "Pending"
     &#125;
   ]'
-  variant="secondary"
+  variant="soft"
 /&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Rich action list</h2><p>Combine descriptions, icons, statuses, and actions in a structured collection.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="list-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"><div data-component="List" size="lg" title="Advanced List" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;list-2-1&quot;,&quot;key&quot;:&quot;list-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;list-2-2&quot;,&quot;key&quot;:&quot;list-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <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="Advanced List"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  title="Service requests"
+  description="Recent requests and their current status."
   items='[
     &#123;
-      "id": "list-2-1",
-      "key": "list-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-demo",
-      "actionHref": "#list-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Address verification",
+      "description": "Submitted yesterday",
+      "status": "Review",
+      "href": "#request-1"
     &#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",
-        "Unlimited"
-      ]
-    &#125;,
-    &#123;
-      "id": "list-2-2",
-      "key": "list-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-demo",
-      "actionHref": "#list-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": [
-        &#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",
-        "Unlimited"
-      ]
+      "label": "Character certificate",
+      "description": "Submitted 3 days ago",
+      "status": "Approved",
+      "href": "#request-2"
     &#125;
   ]'
-  variant="success"
+  variant="raised"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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"</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>string</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="#list-demo-1">Production default</a><a href="#list-demo-2">Compact application</a><a href="#list-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-demo-1">Linked resource list</a><a href="#list-demo-2">Compact status list</a><a href="#list-demo-3">Rich action list</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -5,12 +5,12 @@ page MapDetail {
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"map-0-1\",\n    \"key\": \"map-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#map-demo\",\n    \"actionHref\": \"#map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"map-0-2\",\n    \"key\": \"map-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#map-demo\",\n    \"actionHref\": \"#map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Map"
-    description = "Theme-aware, responsive map component."
+    description = "Present responsive location information and markers with map-ready metadata and movement or marker events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page MapDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Integrations component</span>
         <h1>Map</h1>
-        <p>Theme-aware, responsive map component.</p>
+        <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>0 events</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="Map" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Map" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Map</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><div data-component="Map" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></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>
           <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
@@ -147,10 +147,11 @@ page MapDetail {
 /&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>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="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="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>string</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <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>string</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "map-0-1",
     "key": "map-0-1",
@@ -257,7 +258,7 @@ page MapDetail {
       "Standard"
     ]
   }
-]</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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</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>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,32 @@ 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>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>Station directory map</h2><p>Present locations with supporting names, addresses, and actions.</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"><div data-component="Map" size="default" title="Map example" description="A polished default map for a modern application." items="[{&quot;id&quot;:&quot;map-0-1&quot;,&quot;key&quot;:&quot;map-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;map-0-2&quot;,&quot;key&quot;:&quot;map-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></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>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Station directory 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
-  title="Map example"
-  description="A polished default map for a modern application."
+  title="Nearby police stations"
+  description="Select a station to view contact details and jurisdiction information."
   items='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "title": "Central station",
+      "description": "Main Road",
+      "latitude": 18.5204,
+      "longitude": 73.8567
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "map-0-2",
-      "key": "map-0-2",
-      "value": "secondary",
-      "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": [
-        &#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": "North station",
+      "description": "University Road",
+      "latitude": 18.559,
+      "longitude": 73.807
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,267 +301,71 @@ page MapDetail {
       </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>Compact location preview</h2><p>Use a smaller map preview inside cards, drawers, and record details.</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"><div data-component="Map" size="sm" title="Compact Map" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;map-1-1&quot;,&quot;key&quot;:&quot;map-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;map-1-2&quot;,&quot;key&quot;:&quot;map-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact location preview 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="Compact Map"
-  description="A compact configuration for dashboards and dense product surfaces."
+  title="Service location"
+  description="Public service office"
   items='[
     &#123;
-      "id": "map-1-1",
-      "key": "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": "#map-demo",
-      "actionHref": "#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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "map-1-2",
-      "key": "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": "#map-demo",
-      "actionHref": "#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": [
-        &#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": "Public office",
+      "description": "City centre"
     &#125;
   ]'
-  variant="secondary"
+  variant="soft"
 /&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>
+          <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"><div data-component="Map" size="lg" title="Advanced Map" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;map-2-1&quot;,&quot;key&quot;:&quot;map-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;map-2-2&quot;,&quot;key&quot;:&quot;map-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></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="Rich configuration usage">
+          <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"
-  title="Advanced Map"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  color="info"
+  title="Jurisdiction overview"
+  description="Stations, service areas, and public facilities."
   items='[
     &#123;
-      "id": "map-2-1",
-      "key": "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": "#map-demo",
-      "actionHref": "#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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "title": "Station A"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "title": "Station B"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    &#125;,
-    &#123;
-      "id": "map-2-2",
-      "key": "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": "#map-demo",
-      "actionHref": "#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": [
-        &#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",
-        "Unlimited"
-      ]
+      "title": "Control room"
     &#125;
   ]'
-  variant="success"
+  variant="raised"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>string</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="#map-demo-1">Production default</a><a href="#map-demo-2">Compact application</a><a href="#map-demo-3">Rich configuration</a><a href="#events">Events</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">Station directory map</a><a href="#map-demo-2">Compact location preview</a><a href="#map-demo-3">Operations map</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -11,31 +11,31 @@ page MarketingSectionHeaderDetail {
   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"
+  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 = "Marketing section heading with an optional linked action."
+    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="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Marketing Section Header</span>
+      <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">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Marketing Section Header</h1>
-        <p>Marketing section heading with an optional linked action.</p>
+        <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 events</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">
+    <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><div data-component="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 slot="icon" class="showcase-slot">icon slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></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
@@ -44,14 +44,20 @@ page MarketingSectionHeaderDetail {
   align="start"
   actionLabel="Marketing Section Header"
   actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&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="center">center</option><option value="end">end</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="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>
+          <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>
@@ -60,85 +66,106 @@ page MarketingSectionHeaderDetail {
         <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>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"><div data-component="MarketingSectionHeader" title="Marketing Section Header example" description="A polished default marketing section header for a modern application." align="start" size="default" actionLabel="Marketing Section Header" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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="Production default usage">
+          <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
-  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;!-- Add icon, actions, default slot content here --&gt;
+  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">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>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"><div data-component="MarketingSectionHeader" title="Compact Marketing Section Header" description="A compact configuration for dashboards and dense product surfaces." align="center" size="sm" actionLabel="Compact example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--2"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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="Compact application usage">
+          <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
-  title="Compact Marketing Section Header"
-  description="A compact configuration for dashboards and dense product surfaces."
+  eyebrow="Why WRNexusJS"
+  title="One coherent design system"
+  description="Consistent presentation across public pages and product applications."
   align="center"
-  size="sm"
+  size="compact"
   actionLabel="Compact example"
   actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&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">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>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"><div data-component="MarketingSectionHeader" title="Advanced Marketing Section Header" description="A richer configuration demonstrating additional content and hierarchy." align="end" size="lg" actionLabel="Advanced example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--3"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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="Rich configuration usage">
+          <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
-  title="Advanced Marketing Section Header"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  align="end"
-  size="lg"
-  actionLabel="Advanced example"
-  actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  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="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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">Production default</a><a href="#marketing-section-header-demo-2">Compact application</a><a href="#marketing-section-header-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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"><small>Previous</small><strong>← Hero</strong></a>
-      <a href="/components/metric-card"><small>Next</small><strong>Metric Card →</strong></a>
+      <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

@@ -5,12 +5,12 @@ page MarqueeDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marquee example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marquee for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"marquee-0-1\",\n    \"key\": \"marquee-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#marquee-demo\",\n    \"actionHref\": \"#marquee-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"marquee-0-2\",\n    \"key\": \"marquee-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#marquee-demo\",\n    \"actionHref\": \"#marquee-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"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\":[{\"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\":\"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\":[{\"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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Marquee"
-    description = "Theme-aware, responsive marquee component."
+    description = "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page MarqueeDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Base component</span>
         <h1>Marquee</h1>
-        <p>Theme-aware, responsive marquee component.</p>
+        <p>Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.</p>
         <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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="Marquee" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Marquee" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Marquee</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><div data-component="Marquee" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <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
@@ -147,10 +147,11 @@ page MarqueeDetail {
 /&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>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="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-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "marquee-0-1",
     "key": "marquee-0-1",
@@ -257,7 +258,7 @@ page MarqueeDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-marquee-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-marquee-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-marquee-class"><span><strong>class</strong><small>string</small></span><input id="playground-marquee-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-marquee-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-marquee-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-marquee-class"><span><strong>class</strong><small>string</small></span><input id="playground-marquee-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,35 @@ page MarqueeDetail {
         <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>Partner and capability strip</h2><p>Continuously present short labels, partners, channels, or capabilities.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="marquee-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 data-component="Marquee" size="default" title="Marquee example" description="A polished default marquee for a modern application." items="[{&quot;id&quot;:&quot;marquee-0-1&quot;,&quot;key&quot;:&quot;marquee-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;marquee-0-2&quot;,&quot;key&quot;:&quot;marquee-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' 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="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="Marquee example"
+  title="Supported capabilities"
   description="A polished default marquee for a modern application."
   items='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "SSR"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "CSR"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Themes"
     &#125;,
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Accessibility"
     &#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": "Responsive UI"
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,15 +304,16 @@ page MarqueeDetail {
       </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>Compact announcement ticker</h2><p>Use a dense ticker for short operational updates.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="marquee-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"><div data-component="Marquee" size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;marquee-1-1&quot;,&quot;key&quot;:&quot;marquee-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;marquee-1-2&quot;,&quot;key&quot;:&quot;marquee-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <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"
@@ -409,251 +321,62 @@ page MarqueeDetail {
   description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "id": "marquee-1-1",
-      "key": "marquee-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": "#marquee-demo",
-      "actionHref": "#marquee-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "All services operational"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "New components published"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "marquee-1-2",
-      "key": "marquee-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-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": [
-        &#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": "Documentation updated"
     &#125;
   ]'
-  variant="secondary"
+  variant="soft"
 /&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>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large visual marquee</h2><p>Use stronger spacing and richer items on marketing pages.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="marquee-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"><div data-component="Marquee" size="lg" title="Advanced Marquee" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;marquee-2-1&quot;,&quot;key&quot;:&quot;marquee-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;marquee-2-2&quot;,&quot;key&quot;:&quot;marquee-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <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"
-  title="Advanced Marquee"
+  color="info"
+  title="Built for complete digital platforms"
   description="A richer configuration demonstrating additional content and hierarchy."
   items='[
     &#123;
-      "id": "marquee-2-1",
-      "key": "marquee-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": "#marquee-demo",
-      "actionHref": "#marquee-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Public portals",
+      "icon": "icon-[lucide--landmark]"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Enterprise systems",
+      "icon": "icon-[lucide--building-2]"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    &#125;,
-    &#123;
-      "id": "marquee-2-2",
-      "key": "marquee-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": "#marquee-demo",
-      "actionHref": "#marquee-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": [
-        &#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",
-        "Unlimited"
-      ]
+      "label": "Developer tools",
+      "icon": "icon-[lucide--code-2]"
     &#125;
   ]'
-  variant="success"
+  variant="raised"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"Marquee"</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>string</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="#marquee-demo-1">Production default</a><a href="#marquee-demo-2">Compact application</a><a href="#marquee-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marquee-demo-1">Partner and capability strip</a><a href="#marquee-demo-2">Compact announcement ticker</a><a href="#marquee-demo-3">Large visual marquee</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -4,7 +4,7 @@ page MegaMenuDetail {
   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") ?? "Mega Menu"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"mega-menu-0-1\",\n    \"key\": \"mega-menu-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#mega-menu-demo\",\n    \"actionHref\": \"#mega-menu-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"mega-menu-0-2\",\n    \"key\": \"mega-menu-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#mega-menu-demo\",\n    \"actionHref\": \"#mega-menu-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-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\":\"#mega-menu-demo\",\"actionHref\":\"#mega-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\":[{\"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\":\"mega-menu-0-2\",\"key\":\"mega-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\":\"#mega-menu-demo\",\"actionHref\":\"#mega-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\":[{\"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_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -25,12 +25,12 @@ page MegaMenuDetail {
       </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="MegaMenu" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MegaMenu" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="open,close,select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Mega Menu</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><div data-component="MegaMenu" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><MegaMenu size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' 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;MegaMenu
@@ -145,6 +145,7 @@ page MegaMenuDetail {
 /&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 <code>event.detail</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>
@@ -270,7 +271,8 @@ page MegaMenuDetail {
         <div class="demo-workbench">
           <div id="mega-menu-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 data-component="MegaMenu" size="default" label="Mega Menu" items="[{&quot;id&quot;:&quot;mega-menu-0-1&quot;,&quot;key&quot;:&quot;mega-menu-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;mega-menu-0-2&quot;,&quot;key&quot;:&quot;mega-menu-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><MegaMenu size="default" label="Mega Menu" items='[{"id":"mega-menu-0-1","key":"mega-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":"#mega-menu-demo","actionHref":"#mega-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":[{"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":"mega-menu-0-2","key":"mega-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":"#mega-menu-demo","actionHref":"#mega-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":[{"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>
           </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>
@@ -395,7 +397,8 @@ page MegaMenuDetail {
         <div class="demo-workbench">
           <div id="mega-menu-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"><div data-component="MegaMenu" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;mega-menu-1-1&quot;,&quot;key&quot;:&quot;mega-menu-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;mega-menu-1-2&quot;,&quot;key&quot;:&quot;mega-menu-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><MegaMenu size="sm" label="Compact example" items='[{"id":"mega-menu-1-1","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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":"mega-menu-1-2","key":"mega-menu-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-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"]}]' 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>
@@ -522,7 +525,8 @@ page MegaMenuDetail {
         <div class="demo-workbench">
           <div id="mega-menu-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"><div data-component="MegaMenu" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;mega-menu-2-1&quot;,&quot;key&quot;:&quot;mega-menu-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;mega-menu-2-2&quot;,&quot;key&quot;:&quot;mega-menu-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><MegaMenu size="lg" label="Advanced example" items='[{"id":"mega-menu-2-1","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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":"mega-menu-2-2","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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"]}]' 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>
@@ -641,11 +645,23 @@ page MegaMenuDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</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;MegaMenu
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @select='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"MegaMenu\"], [data-component=\"MegaMenu\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</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>"Mega Menu"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</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>orientation</code></td><td>string</td><td><code>"horizontal"</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">
@@ -653,7 +669,7 @@ component.addEventListener('open', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/footer"><small>Previous</small><strong>← Footer</strong></a>
+      <a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
       <a href="/components/nav"><small>Next</small><strong>Nav →</strong></a>
     </nav>
   }

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

@@ -1,40 +1,42 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page MetricGridDetail {
   layout = "showcase"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"metric-grid-0-1\",\n    \"key\": \"metric-grid-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#metric-grid-demo\",\n    \"actionHref\": \"#metric-grid-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"metric-grid-0-2\",\n    \"key\": \"metric-grid-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#metric-grid-demo\",\n    \"actionHref\": \"#metric-grid-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "4"
-  state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
-  state playground_mobileColumns = ctx.url.searchParams.get("pg_mobileColumns") ?? "1"
+  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"
-  state playground_dividers = ctx.url.searchParams.get("pg_dividers") ?? "false"
+  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 = "Responsive collection of metric cards."
+    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="/layout">Layout</a><span aria-hidden="true">/</span><span>Metric Grid</span>
+      <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">Layout component</span>
+        <span class="showcase-eyebrow">Data component</span>
         <h1>Metric Grid</h1>
-        <p>Responsive collection of metric cards.</p>
-        <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <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 events</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">
+    <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><div data-component="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}" class="{playground_class}"></div></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
@@ -149,117 +151,42 @@ page MetricGridDetail {
 /&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 <code>event.detail</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>
+          <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>string</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "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": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
+    "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": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
+    "label": "Police stations",
+    "value": "126",
+    "description": "Searchable station and jurisdiction entries.",
+    "icon": "icon-[lucide--landmark]",
+    "trend": "Updated",
+    "trendLabel": "today",
+    "color": "info"
   },
   {
-        "label": "API reference",
-        "href": "#api-reference"
+    "label": "Availability",
+    "value": "99.9",
+    "suffix": "%",
+    "description": "Target service availability.",
+    "icon": "icon-[lucide--activity]",
+    "trend": "Stable",
+    "trendLabel": "30 days",
+    "trendDirection": "positive",
+    "color": "success"
   }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  },
-  {
-    "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": [
-      {
-        "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"
-    ]
-  }
-]</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="4" /></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="sm">sm</option><option value="lg">lg</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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+]</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>
@@ -268,393 +195,196 @@ page MetricGridDetail {
         <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>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"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-0-1&quot;,&quot;key&quot;:&quot;metric-grid-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;metric-grid-0-2&quot;,&quot;key&quot;:&quot;metric-grid-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="default" variant="default" class="showcase-instance showcase-instance--1"></div></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="Production default usage">
+          <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='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "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": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Police stations",
+      "value": "126",
+      "description": "Searchable station and jurisdiction entries.",
+      "icon": "icon-[lucide--landmark]",
+      "trend": "Updated",
+      "trendLabel": "today",
+      "color": "info"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "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": [
-        &#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": "Availability",
+      "value": "99.9",
+      "suffix": "%",
+      "description": "Target service availability.",
+      "icon": "icon-[lucide--activity]",
+      "trend": "Stable",
+      "trendLabel": "30 days",
+      "trendDirection": "positive",
+      "color": "success"
     &#125;
   ]'
+  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">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>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"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-1-1&quot;,&quot;key&quot;:&quot;metric-grid-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;metric-grid-1-2&quot;,&quot;key&quot;:&quot;metric-grid-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></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="Compact application usage">
+          <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='[
     &#123;
-      "id": "metric-grid-1-1",
-      "key": "metric-grid-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": "#metric-grid-demo",
-      "actionHref": "#metric-grid-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "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": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Police stations",
+      "value": "126",
+      "description": "Searchable station and jurisdiction entries.",
+      "icon": "icon-[lucide--landmark]",
+      "trend": "Updated",
+      "trendLabel": "today",
+      "color": "info"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "metric-grid-1-2",
-      "key": "metric-grid-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-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": [
-        &#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": "Availability",
+      "value": "99.9",
+      "suffix": "%",
+      "description": "Target service availability.",
+      "icon": "icon-[lucide--activity]",
+      "trend": "Stable",
+      "trendLabel": "30 days",
+      "trendDirection": "positive",
+      "color": "success"
     &#125;
   ]'
+  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">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>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"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-2-1&quot;,&quot;key&quot;:&quot;metric-grid-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;metric-grid-2-2&quot;,&quot;key&quot;:&quot;metric-grid-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></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="Rich configuration usage">
+          <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='[
     &#123;
-      "id": "metric-grid-2-1",
-      "key": "metric-grid-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": "#metric-grid-demo",
-      "actionHref": "#metric-grid-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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "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": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Police stations",
+      "value": "126",
+      "description": "Searchable station and jurisdiction entries.",
+      "icon": "icon-[lucide--landmark]",
+      "trend": "Updated",
+      "trendLabel": "today",
+      "color": "info"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Availability",
+      "value": "99.9",
+      "suffix": "%",
+      "description": "Target service availability.",
+      "icon": "icon-[lucide--activity]",
+      "trend": "Stable",
+      "trendLabel": "30 days",
+      "trendDirection": "positive",
+      "color": "success"
     &#125;,
     &#123;
-      "id": "metric-grid-2-2",
-      "key": "metric-grid-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": "#metric-grid-demo",
-      "actionHref": "#metric-grid-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": [
-        &#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",
-        "Unlimited"
-      ]
+      "label": "Response time",
+      "value": "1.8",
+      "suffix": "s",
+      "description": "Median API response",
+      "icon": "icon-[lucide--timer]",
+      "color": "warning",
+      "progress": 72,
+      "progressLabel": "Target"
     &#125;
   ]'
   size="lg"
-  variant="success"
+  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 events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>string</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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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(event.detail)'
+  @action='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"MetricGrid\"], [data-component=\"MetricGrid\"]")
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)</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>string</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">Production default</a><a href="#metric-grid-demo-2">Compact application</a><a href="#metric-grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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">Events</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/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
+      <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/nav.wrn

@@ -4,7 +4,7 @@ page NavDetail {
   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") ?? "Nav"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"nav-0-1\",\n    \"key\": \"nav-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#nav-demo\",\n    \"actionHref\": \"#nav-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"nav-0-2\",\n    \"key\": \"nav-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#nav-demo\",\n    \"actionHref\": \"#nav-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"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\":[{\"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\":\"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\":[{\"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_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -25,12 +25,12 @@ page NavDetail {
       </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="Nav" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Nav" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Nav</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><div data-component="Nav" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Nav size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' 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
@@ -145,6 +145,7 @@ page NavDetail {
 /&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 <code>event.detail</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>
@@ -270,7 +271,8 @@ page NavDetail {
         <div class="demo-workbench">
           <div id="nav-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 data-component="Nav" size="default" label="Nav" items="[{&quot;id&quot;:&quot;nav-0-1&quot;,&quot;key&quot;:&quot;nav-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;nav-0-2&quot;,&quot;key&quot;:&quot;nav-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Nav size="default" label="Nav" items='[{"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":[{"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":"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":[{"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>
           </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>
@@ -395,7 +397,8 @@ page NavDetail {
         <div class="demo-workbench">
           <div id="nav-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"><div data-component="Nav" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;nav-1-1&quot;,&quot;key&quot;:&quot;nav-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;nav-1-2&quot;,&quot;key&quot;:&quot;nav-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Nav size="sm" label="Compact example" items='[{"id":"nav-1-1","key":"nav-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":"#nav-demo","actionHref":"#nav-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":"nav-1-2","key":"nav-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-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"]}]' 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>
@@ -522,7 +525,8 @@ page NavDetail {
         <div class="demo-workbench">
           <div id="nav-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"><div data-component="Nav" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;nav-2-1&quot;,&quot;key&quot;:&quot;nav-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;nav-2-2&quot;,&quot;key&quot;:&quot;nav-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Nav size="lg" label="Advanced example" items='[{"id":"nav-2-1","key":"nav-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":"#nav-demo","actionHref":"#nav-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":"nav-2-2","key":"nav-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":"#nav-demo","actionHref":"#nav-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"]}]' 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>
@@ -641,11 +645,18 @@ page NavDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</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>@change</code><span>Fires when the component's committed value or selection changes.</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;Nav
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Nav\"], [data-component=\"Nav\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>"Nav"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</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>orientation</code></td><td>string</td><td><code>"horizontal"</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">

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

@@ -5,11 +5,17 @@ page PageHeaderDetail {
   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_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
-  state playground_showBreadcrumbs = ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true"
-  state playground_breadcrumbs = ctx.url.searchParams.get("pg_breadcrumbs") ?? "[\n  {\n    \"id\": \"page-header-0-1\",\n    \"key\": \"page-header-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#page-header-demo\",\n    \"actionHref\": \"#page-header-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"page-header-0-2\",\n    \"key\": \"page-header-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#page-header-demo\",\n    \"actionHref\": \"#page-header-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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") ?? ""
@@ -18,30 +24,31 @@ page PageHeaderDetail {
   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 = "Public and application page header with breadcrumbs, metadata, and actions."
+    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="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Page Header</span>
+      <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">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Page Header</h1>
-        <p>Public and application page header with breadcrumbs, metadata, and actions.</p>
-        <div class="detail-badges"><span>18 props</span><span>3 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <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 events</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">
+    <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><div data-component="PageHeader" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" icon="{playground_icon}" align="{playground_align}" size="{playground_size}" compact="{playground_compact}" showBreadcrumbs="{playground_showBreadcrumbs}" breadcrumbs="{playground_breadcrumbs}" primaryLabel="{playground_primaryLabel}" primaryHref="{playground_primaryHref}" primaryIcon="{playground_primaryIcon}" secondaryLabel="{playground_secondaryLabel}" secondaryHref="{playground_secondaryHref}" secondaryIcon="{playground_secondaryIcon}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"><div slot="meta" class="showcase-slot">meta slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></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
@@ -157,125 +164,39 @@ page PageHeaderDetail {
       ]
     &#125;
   ]'
+  breadcrumbParentHref="#page-header-demo"
   primaryLabel="Page Header"
   primaryHref="#page-header-demo"
   secondaryLabel="Page Header"
   secondaryHref="#page-header-demo"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&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>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-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-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="end">end</option></select></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="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><option value="compact">compact</option></select></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-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>string</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
+          <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>string</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
   {
-    "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": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
+    "label": "Home",
+    "href": "/",
+    "icon": "icon-[lucide--house]"
   },
   {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
+    "label": "Components",
+    "href": "/base"
   },
   {
-        "label": "API reference",
-        "href": "#api-reference"
+    "label": "Page header",
+    "current": true
   }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
-  },
-  {
-    "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": [
-      {
-        "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"
-    ]
-  }
-]</textarea><em data-playground-error></em></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="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-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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+]</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>
@@ -284,157 +205,78 @@ page PageHeaderDetail {
         <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>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"><div data-component="PageHeader" title="Page Header example" description="A polished default page header for a modern application." icon="" align="start" size="default" compact="false" showBreadcrumbs="true" breadcrumbs="[{&quot;id&quot;:&quot;page-header-0-1&quot;,&quot;key&quot;:&quot;page-header-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;page-header-0-2&quot;,&quot;key&quot;:&quot;page-header-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" primaryLabel="Page Header" primaryHref="#page-header-demo" secondaryLabel="Page Header" secondaryHref="#page-header-demo" variant="default" class="showcase-instance showcase-instance--1"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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="Production default usage">
+          <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
-  title="Page Header example"
-  description="A polished default page header for a modern application."
+  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='[
     &#123;
-      "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": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+      "label": "Components",
+      "href": "/base"
     &#125;,
     &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "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": [
-        &#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": "Page header",
+      "current": true
     &#125;
   ]'
-  primaryLabel="Page Header"
-  primaryHref="#page-header-demo"
-  secondaryLabel="Page Header"
-  secondaryHref="#page-header-demo"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  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">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>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"><div data-component="PageHeader" title="Compact Page Header" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" align="center" size="sm" compact="true" showBreadcrumbs="true" breadcrumbs="[{&quot;id&quot;:&quot;page-header-1-1&quot;,&quot;key&quot;:&quot;page-header-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;page-header-1-2&quot;,&quot;key&quot;:&quot;page-header-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" primaryLabel="Compact example" primaryHref="#page-header-demo" secondaryLabel="Compact example" secondaryHref="#page-header-demo" variant="secondary" class="showcase-instance showcase-instance--2"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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 application usage">
+          <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
-  title="Compact Page Header"
-  description="A compact configuration for dashboards and dense product surfaces."
-  icon="icon-[lucide--arrow-right]"
+  eyebrow="Citizen service"
+  title="Track a complaint"
+  description="Check the latest status using your complaint reference."
+  icon="icon-[lucide--scan-search]"
   align="center"
-  size="sm"
   compact="true"
+  size="sm"
   showBreadcrumbs="true"
   breadcrumbs='[
     &#123;
@@ -544,34 +386,44 @@ page PageHeaderDetail {
       ]
     &#125;
   ]'
-  primaryLabel="Compact example"
-  primaryHref="#page-header-demo"
+  breadcrumbParentHref="#page-header-demo"
+  primaryLabel="Track status"
+  primaryHref="#track"
   secondaryLabel="Compact example"
   secondaryHref="#page-header-demo"
-  variant="secondary"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  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">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>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"><div data-component="PageHeader" title="Advanced Page Header" description="A richer configuration demonstrating additional content and hierarchy." icon="icon-[lucide--trash-2]" align="end" size="lg" compact="false" showBreadcrumbs="true" breadcrumbs="[{&quot;id&quot;:&quot;page-header-2-1&quot;,&quot;key&quot;:&quot;page-header-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;page-header-2-2&quot;,&quot;key&quot;:&quot;page-header-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" primaryLabel="Advanced example" primaryHref="#page-header-demo" secondaryLabel="Advanced example" secondaryHref="#page-header-demo" variant="success" class="showcase-instance showcase-instance--3"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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="Rich configuration usage">
+          <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
-  title="Advanced Page Header"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  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="end"
+  align="center"
+  centered="true"
   size="lg"
+  maxWidth="wide"
   showBreadcrumbs="true"
   breadcrumbs='[
     &#123;
@@ -681,26 +533,32 @@ page PageHeaderDetail {
       ]
     &#125;
   ]'
+  breadcrumbParentHref="#page-header-demo"
   primaryLabel="Advanced example"
   primaryHref="#page-header-demo"
   secondaryLabel="Advanced example"
   secondaryHref="#page-header-demo"
-  variant="success"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  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="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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>compact</code></td><td>boolean</td><td><code>false</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>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>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>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>string</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">Production default</a><a href="#page-header-demo-2">Compact application</a><a href="#page-header-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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/metric-card"><small>Previous</small><strong>← Metric Card</strong></a>
-      <a href="/components/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</strong></a>
+      <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

@@ -4,7 +4,7 @@ page PaginationDetail {
   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") ?? "Pagination"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"pagination-0-1\",\n    \"key\": \"pagination-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#pagination-demo\",\n    \"actionHref\": \"#pagination-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"pagination-0-2\",\n    \"key\": \"pagination-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#pagination-demo\",\n    \"actionHref\": \"#pagination-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"pagination-0-1\",\"key\":\"pagination-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\":\"#pagination-demo\",\"actionHref\":\"#pagination-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\":\"pagination-0-2\",\"key\":\"pagination-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#pagination-demo\",\"actionHref\":\"#pagination-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_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -25,12 +25,12 @@ page PaginationDetail {
       </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="Pagination" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Pagination" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change,previous,next">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Pagination</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><div data-component="Pagination" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Pagination size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' 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
@@ -145,6 +145,7 @@ page PaginationDetail {
 /&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 <code>event.detail</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>
@@ -270,7 +271,8 @@ page PaginationDetail {
         <div class="demo-workbench">
           <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"><div data-component="Pagination" size="default" label="Pagination" items="[{&quot;id&quot;:&quot;pagination-0-1&quot;,&quot;key&quot;:&quot;pagination-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;pagination-0-2&quot;,&quot;key&quot;:&quot;pagination-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Pagination size="default" label="Pagination" items='[{"id":"pagination-0-1","key":"pagination-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":"#pagination-demo","actionHref":"#pagination-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":"pagination-0-2","key":"pagination-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-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>
           </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>
@@ -395,7 +397,8 @@ page PaginationDetail {
         <div class="demo-workbench">
           <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"><div data-component="Pagination" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;pagination-1-1&quot;,&quot;key&quot;:&quot;pagination-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;pagination-1-2&quot;,&quot;key&quot;:&quot;pagination-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Pagination size="sm" label="Compact example" items='[{"id":"pagination-1-1","key":"pagination-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":"#pagination-demo","actionHref":"#pagination-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":"pagination-1-2","key":"pagination-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-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"]}]' 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>
@@ -522,7 +525,8 @@ page PaginationDetail {
         <div class="demo-workbench">
           <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"><div data-component="Pagination" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;pagination-2-1&quot;,&quot;key&quot;:&quot;pagination-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;pagination-2-2&quot;,&quot;key&quot;:&quot;pagination-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Pagination size="lg" label="Advanced example" items='[{"id":"pagination-2-1","key":"pagination-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":"#pagination-demo","actionHref":"#pagination-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":"pagination-2-2","key":"pagination-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":"#pagination-demo","actionHref":"#pagination-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"]}]' 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>
@@ -641,11 +645,23 @@ page PaginationDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@previous</code><span>Fires when the component emits the previous event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@previous</code><span>Fires when the component emits the previous event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</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;Pagination
+  @change='console.log(event.detail)'
+  @previous='console.log(event.detail)'
+  @next='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Pagination\"], [data-component=\"Pagination\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("previous", (event) =&gt; &#123;
+  console.log("previous", event.detail)
+&#125;)
+
+component?.addEventListener("next", (event) =&gt; &#123;
+  console.log("next", event.detail)
+&#125;)</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>"Pagination"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</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>orientation</code></td><td>string</td><td><code>"horizontal"</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">
@@ -654,7 +670,7 @@ component.addEventListener('change', (event) =&gt; &#123;
     </div>
     <nav class="detail-pagination">
       <a href="/components/navbar"><small>Previous</small><strong>← Navbar</strong></a>
-      <a href="/components/preference-switcher"><small>Next</small><strong>Preference Switcher →</strong></a>
+      <a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</strong></a>
     </nav>
   }
 }

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

@@ -6,25 +6,25 @@ page PinInputDetail {
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default four-digit PIN"
   state playground_name = ctx.url.searchParams.get("pg_name") ?? "pin-input-1"
   state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_length = ctx.url.searchParams.get("pg_length") ?? "4"
+  state playground_length = Number(ctx.url.searchParams.get("pg_length") ?? "4")
   state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "[0-9]"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
   state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "numeric"
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "○"
   state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "one-time-code"
-  state playground_masked = ctx.url.searchParams.get("pg_masked") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_autoFocus = ctx.url.searchParams.get("pg_autoFocus") ?? "false"
-  state playground_autoSubmit = ctx.url.searchParams.get("pg_autoSubmit") ?? "false"
-  state playground_allowPaste = ctx.url.searchParams.get("pg_allowPaste") ?? "true"
-  state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true"
+  state playground_masked = (ctx.url.searchParams.get("pg_masked") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_autoFocus = (ctx.url.searchParams.get("pg_autoFocus") ?? "false") === "true"
+  state playground_autoSubmit = (ctx.url.searchParams.get("pg_autoSubmit") ?? "false") === "true"
+  state playground_allowPaste = (ctx.url.searchParams.get("pg_allowPaste") ?? "true") === "true"
+  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
   state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear code"
   state playground_separator = ctx.url.searchParams.get("pg_separator") ?? ""
-  state playground_groupSize = ctx.url.searchParams.get("pg_groupSize") ?? "0"
+  state playground_groupSize = Number(ctx.url.searchParams.get("pg_groupSize") ?? "0")
   state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
   state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
@@ -44,12 +44,12 @@ page PinInputDetail {
       </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="PinInput" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PinInput" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,complete,paste,clear,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Pin Input</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><div data-component="PinInput" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" length="{playground_length}" pattern="{playground_pattern}" type="{playground_type}" inputMode="{playground_inputMode}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" masked="{playground_masked}" disabled="{playground_disabled}" readonly="{playground_readonly}" required="{playground_required}" autoFocus="{playground_autoFocus}" autoSubmit="{playground_autoSubmit}" allowPaste="{playground_allowPaste}" clearable="{playground_clearable}" clearLabel="{playground_clearLabel}" separator="{playground_separator}" groupSize="{playground_groupSize}" helpText="{playground_helpText}" invalid="{playground_invalid}" validationMessage="{playground_validationMessage}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><PinInput size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' length='{playground_length}' pattern='{playground_pattern}' type='{playground_type}' inputMode='{playground_inputMode}' placeholder='{playground_placeholder}' autocomplete='{playground_autocomplete}' masked='{playground_masked}' disabled='{playground_disabled}' readonly='{playground_readonly}' required='{playground_required}' autoFocus='{playground_autoFocus}' autoSubmit='{playground_autoSubmit}' allowPaste='{playground_allowPaste}' clearable='{playground_clearable}' clearLabel='{playground_clearLabel}' separator='{playground_separator}' groupSize='{playground_groupSize}' helpText='{playground_helpText}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' 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;PinInput
@@ -58,6 +58,7 @@ page PinInputDetail {
 /&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 <code>event.detail</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>
@@ -76,7 +77,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-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"><div data-component="PinInput" size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Default four-digit PIN usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -95,7 +97,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-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"><div class="pin-length-demo"><div data-component="PinInput" size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div><div data-component="PinInput" size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div><div data-component="PinInput" size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div></div>
+            
+            <div class="demo-render"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div>
           </div>
           <section class="demo-code" aria-label="Different lengths usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -127,7 +130,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-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"><div data-component="PinInput" size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Pre-filled verification code usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -148,7 +152,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-4" class="demo-canvas demo-canvas--4">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Masked security PIN usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -168,7 +173,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-5" class="demo-canvas demo-canvas--5">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Alphanumeric regex usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -190,7 +196,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-6" class="demo-canvas demo-canvas--6">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Grouped code with separator usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -212,7 +219,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-7" class="demo-canvas demo-canvas--7">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Paste from clipboard usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -232,7 +240,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-8" class="demo-canvas demo-canvas--8">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled PIN input usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -253,7 +262,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-9" class="demo-canvas demo-canvas--9">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Read-only code usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -275,7 +285,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-10" class="demo-canvas demo-canvas--10">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><div data-component="PinInput" size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
+            
+            <div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
           </div>
           <section class="demo-code" aria-label="Validation state usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -296,7 +307,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-11" class="demo-canvas demo-canvas--11">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Supporting help text usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -317,7 +329,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-12" class="demo-canvas demo-canvas--12">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Large PIN cells usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -338,7 +351,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-13" class="demo-canvas demo-canvas--13">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Custom placeholder usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -359,7 +373,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-14" class="demo-canvas demo-canvas--14">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Automatic form submission usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -380,7 +395,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-15" class="demo-canvas demo-canvas--15">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Completion events usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -400,7 +416,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-16" class="demo-canvas demo-canvas--16">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="JavaScript methods usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -412,11 +429,38 @@ page PinInputDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div><div><code>@paste</code><span>Fires when the component emits the paste event.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@complete</code><span>Fires when the component emits the complete event.</span></div><div><code>@paste</code><span>Fires after clipboard content is processed.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</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;PinInput
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @complete='console.log(event.detail)'
+  @paste='console.log(event.detail)'
+  @clear='console.log(event.detail)'
+  @error='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"PinInput\"], [data-component=\"PinInput\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("complete", (event) =&gt; &#123;
+  console.log("complete", event.detail)
+&#125;)
+
+component?.addEventListener("paste", (event) =&gt; &#123;
+  console.log("paste", event.detail)
+&#125;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)</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>"Verification code"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"pin"</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>length</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>"[0-9]"</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>inputMode</code></td><td>string</td><td><code>"numeric"</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>autocomplete</code></td><td>string</td><td><code>"one-time-code"</code></td><td>No</td></tr><tr><td><code>masked</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>readonly</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>autoFocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoSubmit</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>allowPaste</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear code"</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>groupSize</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</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">
@@ -425,7 +469,7 @@ component.addEventListener('input', (event) =&gt; &#123;
     </div>
     <nav class="detail-pagination">
       <a href="/components/input-number"><small>Previous</small><strong>← Input Number</strong></a>
-      <a href="/components/search-box"><small>Next</small><strong>Search Box →</strong></a>
+      <a href="/components/strong-password"><small>Next</small><strong>Strong Password →</strong></a>
     </nav>
   }
 }

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

@@ -8,31 +8,31 @@ page PreferenceSwitcherDetail {
   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_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Preference Switcher"
-    description = "Accessible theme, accent color, and language preference controls."
+    description = "Reusable preference switcher component."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Preference Switcher</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Preference Switcher</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Navigation component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Preference Switcher</h1>
-        <p>Accessible theme, accent color, and language preference controls.</p>
+        <p>Reusable preference switcher component.</p>
         <div class="detail-badges"><span>9 props</span><span>0 slots</span><span>3 events</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="PreferenceSwitcher" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PreferenceSwitcher" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="theme,color,language">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Preference Switcher</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><div data-component="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>
+          <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>
           <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
@@ -43,6 +43,7 @@ page PreferenceSwitcherDetail {
 /&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 <code>event.detail</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>
@@ -61,7 +62,8 @@ page PreferenceSwitcherDetail {
         <div class="demo-workbench">
           <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"><div data-component="PreferenceSwitcher" size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1"></div></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>
           <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>
@@ -82,7 +84,8 @@ page PreferenceSwitcherDetail {
         <div class="demo-workbench">
           <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"><div data-component="PreferenceSwitcher" size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" class="showcase-instance showcase-instance--2"></div></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>
           <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>
@@ -103,7 +106,8 @@ page PreferenceSwitcherDetail {
         <div class="demo-workbench">
           <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"><div data-component="PreferenceSwitcher" size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" class="showcase-instance showcase-instance--3"></div></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>
           <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>
@@ -117,11 +121,23 @@ page PreferenceSwitcherDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@theme</code><span>Fires when the component emits the theme event.</span></div><div><code>@color</code><span>Fires when the component emits the color event.</span></div><div><code>@language</code><span>Fires when the component emits the language event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@theme</code><span>Fires when the component emits the theme event.</span></div><div><code>@color</code><span>Fires when the component emits the color event.</span></div><div><code>@language</code><span>Fires when the component emits the language event.</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;PreferenceSwitcher
+  @theme='console.log(event.detail)'
+  @color='console.log(event.detail)'
+  @language='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"PreferenceSwitcher\"], [data-component=\"PreferenceSwitcher\"]")
 
-component.addEventListener('theme', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("theme", (event) =&gt; &#123;
+  console.log("theme", event.detail)
+&#125;)
+
+component?.addEventListener("color", (event) =&gt; &#123;
+  console.log("color", event.detail)
+&#125;)
+
+component?.addEventListener("language", (event) =&gt; &#123;
+  console.log("language", event.detail)
+&#125;)</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>
       </main>
       <aside class="detail-aside">
@@ -129,8 +145,8 @@ component.addEventListener('theme', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/pagination"><small>Previous</small><strong>← Pagination</strong></a>
-      <a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</strong></a>
+      <a href="/components/portal-dashboard"><small>Previous</small><strong>← Portal Dashboard</strong></a>
+      <span></span>
     </nav>
   }
 }

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

@@ -4,9 +4,9 @@ page ProgressDetail {
   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") ?? "Progress"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "36"
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
+  state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Progress"
@@ -25,12 +25,12 @@ page ProgressDetail {
       </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="Progress" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Progress" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Progress</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><div data-component="Progress" size="{playground_size}" color="{playground_color}" label="{playground_label}" value="{playground_value}" max="{playground_max}" showValue="{playground_showValue}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Progress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' 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;Progress
@@ -38,6 +38,7 @@ page ProgressDetail {
 /&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>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -56,7 +57,8 @@ page ProgressDetail {
         <div class="demo-workbench">
           <div id="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"><div data-component="Progress" size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Progress size="default" label="Progress" value="36" max="100" showValue="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>
@@ -74,7 +76,8 @@ page ProgressDetail {
         <div class="demo-workbench">
           <div id="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"><div data-component="Progress" size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Progress size="sm" label="Compact example" value="60" max="100" showValue="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>
@@ -94,7 +97,8 @@ page ProgressDetail {
         <div class="demo-workbench">
           <div id="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"><div data-component="Progress" size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="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>
@@ -106,11 +110,11 @@ page ProgressDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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="#progress-demo-1">Production default</a><a href="#progress-demo-2">Compact application</a><a href="#progress-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#progress-demo-1">Production default</a><a href="#progress-demo-2">Compact application</a><a href="#progress-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

@@ -2,7 +2,7 @@
 page PublicPageShellDetail {
   layout = "showcase"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
+  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"
@@ -13,7 +13,7 @@ page PublicPageShellDetail {
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Public Page Shell"
-    description = "Consistent structural wrapper for public-facing pages."
+    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">
@@ -23,29 +23,40 @@ page PublicPageShellDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Public Page Shell</h1>
-        <p>Consistent structural wrapper for public-facing pages.</p>
+        <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 events</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">
+    <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><div data-component="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 slot="before" class="showcase-slot">before slot</div><div slot="after" class="showcase-slot">after slot</div></div></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;!-- Add before, default, after slot content here --&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="lg">lg</option><option value="xl">xl</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></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="hidden">hidden</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="dvh">dvh</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><select id="playground-public-page-shell-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+          <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>
@@ -54,73 +65,125 @@ page PublicPageShellDetail {
         <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>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"><div data-component="PublicPageShell" fullWidth="false" size="default" variant="default" class="showcase-instance showcase-instance--1"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></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="Production default usage">
+          <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;!-- Add before, default, after slot content here --&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">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>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"><div data-component="PublicPageShell" fullWidth="false" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></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="Compact application usage">
+          <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;!-- Add before, default, after slot content here --&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">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>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"><div data-component="PublicPageShell" fullWidth="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></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="Rich configuration usage">
+          <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;!-- Add before, default, after slot content here --&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="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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">Production default</a><a href="#public-page-shell-demo-2">Compact application</a><a href="#public-page-shell-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <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/metric-grid"><small>Previous</small><strong>← Metric Grid</strong></a>
+      <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/rating.wrn

@@ -5,7 +5,7 @@ page RatingDetail {
   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 = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"rating-0-1\",\n    \"key\": \"rating-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#rating-demo\",\n    \"actionHref\": \"#rating-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"rating-0-2\",\n    \"key\": \"rating-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#rating-demo\",\n    \"actionHref\": \"#rating-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  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_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page RatingDetail {
       </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="Rating" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Rating" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Rating</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><div data-component="Rating" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></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>
           <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
@@ -147,6 +147,7 @@ page RatingDetail {
 /&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 <code>event.detail</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>
@@ -257,7 +258,7 @@ page RatingDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-rating-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page RatingDetail {
         <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"><div data-component="Rating" size="default" title="Rating example" description="A polished default rating for a modern application." items="[{&quot;id&quot;:&quot;rating-0-1&quot;,&quot;key&quot;:&quot;rating-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;rating-0-2&quot;,&quot;key&quot;:&quot;rating-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></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>
           <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>
@@ -399,7 +401,8 @@ page RatingDetail {
         <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"><div data-component="Rating" size="sm" title="Compact Rating" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;rating-1-1&quot;,&quot;key&quot;:&quot;rating-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;rating-1-2&quot;,&quot;key&quot;:&quot;rating-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></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>
           <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>
@@ -528,7 +531,8 @@ page RatingDetail {
         <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"><div data-component="Rating" size="lg" title="Advanced Rating" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;rating-2-1&quot;,&quot;key&quot;:&quot;rating-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;rating-2-2&quot;,&quot;key&quot;:&quot;rating-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></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>
           <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>
@@ -649,11 +653,18 @@ page RatingDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</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;Rating
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Rating\"], [data-component=\"Rating\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>string</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">