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:
+The red `Permissions policy violation: unload ... chext_driver.js` message comes from a browser extension/content script and is unrelated to WRNexusJS.
-
-```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`

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,
+The showcase is generated from `packages/ui/component-reference.json`. It stays
-prop-driven data. Pages are generated from `packages/ui/component-reference.json`
+synchronized with the current component source rather than maintaining a second
-so coverage stays synchronized with the packaged component catalog.
+hand-written catalog.
 
 ```bash
 bun run --cwd examples/component-showcase dev
 ```
 
-Open `http://localhost:3000`. The index links to the category catalog, and every
+Open `http://localhost:3000`.
-component card opens a dedicated documentation page with three live use cases,
-usage examples, its prop API, events, slots, and related navigation.
 
-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
+Review representative component pages at mobile, tablet, and desktop widths and
-instead of editing those pages directly.
+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>
+          <a class="docs-directory-heading" href="/core">Core</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>
+          <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>
+      <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>9 components</span><span>Multiple use cases</span><span>116 live configurations</span></div>
+      <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 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>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>
         <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/base.wrn

@@ -3,290 +3,280 @@ page BaseShowcase {
   layout = "showcase"
   seo {
     title = "Base components"
-    description = "28 base components from @wrnexus/ui."
+    description = "27 base components from @wrnexus/ui."
   }
   view {
     <header class="showcase-hero showcase-hero--category">
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Base</h1>
-      <p class="showcase-description">28 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>28 components</span><span>Multiple use cases</span><span>172 live configurations</span></div>
+      <div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>86 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="Accordion" size="default" color="primary" id="accordion-example-1" items="[{&quot;value&quot;:&quot;first&quot;,&quot;label&quot;:&quot;Accordion #1&quot;,&quot;content&quot;:&quot;This is the item&#39;s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.&quot;},{&quot;value&quot;:&quot;second&quot;,&quot;label&quot;:&quot;Accordion #2&quot;,&quot;content&quot;:&quot;This is the item&#39;s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.&quot;},{&quot;value&quot;:&quot;third&quot;,&quot;label&quot;:&quot;Accordion #3&quot;,&quot;content&quot;:&quot;This is the item&#39;s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.&quot;}]" defaultOpen="[&quot;first&quot;]" contentItalic="true"></div></div>
+          <div class="catalog-card-stage"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" items='[{"id":"accordion-0-1","key":"accordion-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"accordion-0-2","key":"accordion-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' defaultOpen='[{"id":"accordion-0-1","key":"accordion-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"accordion-0-2","key":"accordion-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' multiple="false" alwaysOpen="false" disabled="false" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
           <div class="catalog-card-footer"><span>17 props · 0 slots</span><a href="/components/accordion">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="Alert" color="dark" variant="solid" radius="lg" shadow="sm" title="Dark alert!" description="You should check in on some of those fields below." items="[]" actions="[]" showIcon="false" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="true"></div></div>
+          <div class="catalog-card-stage"><Alert size="default" variant="soft" class="showcase-instance showcase-instance--1" title="Alert example" description="A polished default alert for a modern application." items='[{"id":"alert-0-1","key":"alert-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"alert-0-2","key":"alert-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"alert-0-1","key":"alert-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"alert-0-2","key":"alert-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' showIcon="true" icon="" dismissible="true" dismissLabel="Alert" linkLabel="Alert" linkHref="#alert-demo" actionLabel="Alert" actionHref="#alert-demo" compact="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
           <div class="catalog-card-footer"><span>21 props · 0 slots</span><a href="/components/alert">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="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></div>
+          <div class="catalog-card-stage"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
           <div class="catalog-card-footer"><span>18 props · 0 slots</span><a href="/components/avatar">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="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="catalog-card-stage"><AvatarGroup items='[{"id":"avatar-group-0-1","key":"avatar-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' size="md" variant="solid" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Avatar Group" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
           <div class="catalog-card-footer"><span>12 props · 0 slots</span><a href="/components/avatar-group">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="Badge" label="Active" size="md" color="success" variant="solid" shape="pill"></div></div>
+          <div class="catalog-card-stage"><Badge label="Badge" size="md" variant="solid" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Badge" animated="false" dismissible="true" dismissLabel="Badge" truncate="false" anchorLabel="Badge" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
           <div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="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="catalog-card-stage"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
           <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="Button" label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Button label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p></div>
           <div class="catalog-card-footer"><span>25 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="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="catalog-card-stage"><ButtonGroup items='[{"id":"button-group-0-1","key":"button-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' value="sample-1" size="md" variant="default" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 1 example" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
           <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/button-group">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="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card&#39;s content." imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="Go somewhere" actionHref="#card-demo" size="md" color="primary"></div></div>
+          <div class="catalog-card-stage"><Card title="Citizen service" subtitle="Card example" description="Access a trusted online service." actionLabel="Card" actionHref="#card-demo" headerActions='[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' navigation='[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' mobileNavigation="false" alertTitle="Card example" alertDescription="A polished default card for a modern application." empty="false" emptyTitle="Card example" items='[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable messagLine truncated
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p></div>
+          <div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Group related content in a responsive themed surface with title, description, content, and supporting slots.</p></div>
           <div class="catalog-card-footer"><span>31 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="Carousel" size="default" color="primary" title="" description="" items="[{&quot;label&quot;:&quot;First slide&quot;,&quot;title&quot;:&quot;First slide&quot;,&quot;description&quot;:&quot;Introduce the collection with a concise, focused message.&quot;},{&quot;label&quot;:&quot;Second slide&quot;,&quot;title&quot;:&quot;Second slide&quot;,&quot;description&quot;:&quot;Move through content using buttons, pagination, keyboard, or touch.&quot;},{&quot;label&quot;:&quot;Third slide&quot;,&quot;title&quot;:&quot;Third slide&quot;,&quot;description&quot;:&quot;Every interaction exposes useful public lifecycle and navigation events.&quot;},{&quot;label&quot;:&quot;Fourth slide&quot;,&quot;title&quot;:&quot;Fourth slide&quot;,&quot;description&quot;:&quot;Flexible for larger collections.&quot;},{&quot;label&quot;:&quot;Fifth slide&quot;,&quot;title&quot;:&quot;Fifth slide&quot;,&quot;description&quot;:&quot;Responsive at every viewport.&quot;},{&quot;label&quot;:&quot;Sixth slide&quot;,&quot;title&quot;:&quot;Sixth slide&quot;,&quot;description&quot;:&quot;Built with accessible semantics.&quot;}]" ariaLabel="Basic usage"></div></div>
+          <div class="catalog-card-stage"><Carousel size="default" title="Carousel example" description="A polished default carousel for a modern application." items='[{"id":"carousel-0-1","key":"carousel-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
           <div class="catalog-card-footer"><span>22 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="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="catalog-card-stage"><ChatBubble size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items='[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
           <div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/chat-bubble">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="Collapse" size="default" color="primary" items="[{&quot;id&quot;:&quot;collapse-default-panel&quot;,&quot;label&quot;:&quot;Collapse&quot;,&quot;closeLabel&quot;:&quot;Collapse&quot;,&quot;content&quot;:&quot;This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused.&quot;}]" multiple="false" mode="panel" initialOpenIndexes="[]" ariaLabel="Default collapse"></div></div>
+          <div class="catalog-card-stage"><Collapse size="default" items='[{"id":"collapse-0-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-0-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 1 example" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p></div>
           <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/collapse">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="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
           <div class="catalog-card-footer"><span>25 props · 0 slots</span><a href="/components/date-picker">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Device Frame</h2><p>Theme-aware, responsive device frame component.</p></div>
           <div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/device-frame">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="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="catalog-card-stage"><FileUploadProgress size="default" label="File Upload Progress" value="36" max="100" showValue="true" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
           <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="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="catalog-card-stage"><LegendIndicator size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items='[{"id":"legend-indicator-0-1","key":"legend-indicator-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
-        </div>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Base</span><h2>Hero Actions</h2><p>Responsive action group for hero and call-to-action sections.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/hero-actions">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="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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Legend Indicator</h2><p>Theme-aware, responsive legend indicator component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/legend-indicator">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Base</span><h2>List</h2><p>Theme-aware, responsive list component.</p></div>
+          <div><span class="catalog-card-category">Base</span><h2>List</h2><p>Present structured responsive linked or status items with icons, descriptions, actions, and selection events.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list">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="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="catalog-card-stage"><ListGroup size="default" title="List Group example" description="A polished default list group for a modern application." items='[{"id":"list-group-0-1","key":"list-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>List Group</h2><p>Theme-aware, responsive list group component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p></div>
+          <div><span class="catalog-card-category">Base</span><h2>Marquee</h2><p>Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/marquee">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="Progress" size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Progress</h2><p>Theme-aware, responsive progress component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 0 slots</span><a href="/components/progress">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="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="catalog-card-stage"><Rating size="default" title="Rating example" description="A polished default rating for a modern application." items='[{"id":"rating-0-1","key":"rating-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="Skeleton" label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Skeleton label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton component.</p></div>
           <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/skeleton">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="Spinner" label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Spinner label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner component.</p></div>
           <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/spinner">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="StyledIcon" size="default" title="Styled Icon example" description="A polished default styled icon for a modern application." items="[{&quot;id&quot;:&quot;styled-icon-0-1&quot;,&quot;key&quot;:&quot;styled-icon-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;#styled-icon-demo&quot;,&quot;actionHref&quot;:&quot;#styled-icon-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;styled-icon-0-2&quot;,&quot;key&quot;:&quot;styled-icon-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;#styled-icon-demo&quot;,&quot;actionHref&quot;:&quot;#styled-icon-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="catalog-card-stage"><StyledIcon size="default" title="Styled Icon example" description="A polished default styled icon for a modern application." items='[{"id":"styled-icon-0-1","key":"styled-icon-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#styled-icon-demo","actionHref":"#styled-icon-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"styled-icon-0-2","key":"styled-icon-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#styled-icon-demo","actionHref":"#styled-icon-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Styled Icon</h2><p>Theme-aware, responsive styled icon component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="Timeline" size="default" title="Timeline example" description="A polished default timeline for a modern application." items="[{&quot;id&quot;:&quot;timeline-0-1&quot;,&quot;key&quot;:&quot;timeline-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;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-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;timeline-0-2&quot;,&quot;key&quot;:&quot;timeline-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;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-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="catalog-card-stage"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p></div>
+          <div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Present responsive chronological activity, milestones, or workflow status with rich item metadata.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </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="Toast" size="default" title="Toast example" description="A polished default toast for a modern application." items="[{&quot;id&quot;:&quot;toast-0-1&quot;,&quot;key&quot;:&quot;toast-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;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-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;toast-0-2&quot;,&quot;key&quot;:&quot;toast-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;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-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="catalog-card-stage"><Toast size="default" title="Toast example" description="A polished default toast for a modern application." items='[{"id":"toast-0-1","key":"toast-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":"#toast-demo","actionHref":"#toast-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":"toast-0-2","key":"toast-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#toast-demo","actionHref":"#toast-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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/toast">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="TreeView" size="default" title="Tree View example" description="A polished default tree view for a modern application." items="[{&quot;id&quot;:&quot;tree-view-0-1&quot;,&quot;key&quot;:&quot;tree-view-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;#tree-view-demo&quot;,&quot;actionHref&quot;:&quot;#tree-view-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;tree-view-0-2&quot;,&quot;key&quot;:&quot;tree-view-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;#tree-view-demo&quot;,&quot;actionHref&quot;:&quot;#tree-view-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="catalog-card-stage"><TreeView size="default" title="Tree View example" description="A polished default tree view for a modern application." items='[{"id":"tree-view-0-1","key":"tree-view-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"tree-view-0-2","key":"tree-view-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Tree View</h2><p>Theme-aware, responsive tree view component.</p></div>

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

@@ -1,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;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/announcement-bar.wrn

@@ -9,39 +9,40 @@ page AnnouncementBarDetail {
   state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Announcement Bar"
   state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#announcement-bar-demo"
   state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
-  state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "true"
+  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
   state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Announcement Bar"
-  state playground_sticky = ctx.url.searchParams.get("pg_sticky") ?? "false"
+  state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
-  state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
+  state playground_width = ctx.url.searchParams.get("pg_width") ?? "wide"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "soft"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_role = ctx.url.searchParams.get("pg_role") ?? "status"
   state playground_live = ctx.url.searchParams.get("pg_live") ?? "polite"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Announcement Bar"
-    description = "Accessible public announcement, emergency, maintenance, or status bar."
+    description = "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Announcement Bar</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Announcement Bar</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Announcement Bar</h1>
-        <p>Accessible public announcement, emergency, maintenance, or status bar.</p>
+        <p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p>
-        <div class="detail-badges"><span>18 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>19 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="AnnouncementBar" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AnnouncementBar" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="dismiss">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Announcement Bar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="AnnouncementBar" badge="{playground_badge}" badgeIcon="{playground_badgeIcon}" message="{playground_message}" description="{playground_description}" icon="{playground_icon}" actionLabel="{playground_actionLabel}" actionHref="{playground_actionHref}" actionIcon="{playground_actionIcon}" dismissible="{playground_dismissible}" dismissLabel="{playground_dismissLabel}" sticky="{playground_sticky}" compact="{playground_compact}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" role="{playground_role}" live="{playground_live}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AnnouncementBar badge='{playground_badge}' badgeIcon='{playground_badgeIcon}' message='{playground_message}' description='{playground_description}' icon='{playground_icon}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' sticky='{playground_sticky}' compact='{playground_compact}' size='{playground_size}' width='{playground_width}' color='{playground_color}' variant='{playground_variant}' role='{playground_role}' live='{playground_live}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;AnnouncementBar
@@ -53,10 +54,11 @@ page AnnouncementBarDetail {
 /&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>
+          <header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-announcement-bar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-announcement-bar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-announcement-bar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-message"><span><strong>message</strong><small>string</small></span><input id="playground-announcement-bar-message" name="pg_message" type="text" value="Announcement" /></label><label class="playground-field" for="playground-announcement-bar-description"><span><strong>description</strong><small>string</small></span><input id="playground-announcement-bar-description" name="pg_description" type="text" value="A polished default announcement bar for a modern application." /></label><label class="playground-field" for="playground-announcement-bar-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-announcement-bar-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-announcement-bar-actionLabel" name="pg_actionLabel" type="text" value="Announcement Bar" /></label><label class="playground-field" for="playground-announcement-bar-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-announcement-bar-actionHref" name="pg_actionHref" type="text" value="#announcement-bar-demo" /></label><label class="playground-field" for="playground-announcement-bar-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-announcement-bar-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-announcement-bar-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-announcement-bar-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-announcement-bar-dismissLabel" name="pg_dismissLabel" type="text" value="Announcement Bar" /></label><label class="playground-toggle" for="playground-announcement-bar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-announcement-bar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-announcement-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-announcement-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-announcement-bar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-announcement-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-announcement-bar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="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-announcement-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-announcement-bar-variant" name="pg_variant"><option value="soft" selected>soft</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="solid">solid</option></select></label><label class="playground-field" for="playground-announcement-bar-role"><span><strong>role</strong><small>string</small></span><input id="playground-announcement-bar-role" name="pg_role" type="text" value="status" /></label><label class="playground-field" for="playgroLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-announcement-bar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-announcement-bar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-announcement-bar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-message"><span><strong>message</strong><small>string</small></span><input id="playground-announcement-bar-message" name="pg_message" type="text" value="Announcement" /></label><label class="playground-field" for="playground-announcement-bar-description"><span><strong>description</strong><small>string</small></span><input id="playground-announcement-bar-description" name="pg_description" type="text" value="A polished default announcement bar for a modern application." /></label><label class="playground-field" for="playground-announcement-bar-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-announcement-bar-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-announcement-bar-actionLabel" name="pg_actionLabel" type="text" value="Announcement Bar" /></label><label class="playground-field" for="playground-announcement-bar-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-announcement-bar-actionHref" name="pg_actionHref" type="text" value="#announcement-bar-demo" /></label><label class="playground-field" for="playground-announcement-bar-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-announcement-bar-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-announcement-bar-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-announcement-bar-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-announcement-bar-dismissLabel" name="pg_dismissLabel" type="text" value="Announcement Bar" /></label><label class="playground-toggle" for="playground-announcement-bar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-announcement-bar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-announcement-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-announcement-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-announcement-bar-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-announcement-bar-width"><span><strong>width</strong><small>string</small></span><select id="playground-announcement-bar-width" name="pg_width"><option value="wide" selected>wide</option><option value="default">default</option><option value="full">full</option><option value="compact">compact</option></select></label><label class="playground-field" for="playground-announcement-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-announcement-bar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-announcement-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-announcement-bar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="default">default</option><option value="outline">outline</optionLine truncated
         </form>
       </div>
     </section>
@@ -65,20 +67,25 @@ page AnnouncementBarDetail {
         <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>Soft product notice</h2><p>Use a calm, dismissible notice inside a constrained content area.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="announcement-bar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AnnouncementBar" description="A polished default announcement bar for a modern application." icon="" actionLabel="Announcement Bar" actionHref="#announcement-bar-demo" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" size="default" variant="soft" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Soft product notice usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;AnnouncementBar
-  description="A polished default announcement bar for a modern application."
+  badge="Public notice"
-  actionLabel="Announcement Bar"
+  badgeIcon="icon-[lucide--sparkles]"
-  actionHref="#announcement-bar-demo"
+  message="All composite components are now available"
+  description="Review each component and its recommended use cases."
+  actionLabel="View components"
+  actionHref="#components"
+  actionIcon="icon-[lucide--arrow-down]"
   dismissible="true"
   dismissLabel="Announcement Bar"
 /&gt;</code></pre>
@@ -87,60 +94,75 @@ page AnnouncementBarDetail {
       </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>Wide solid announcement</h2><p>Use stronger contrast for important platform or service announcements.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="announcement-bar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AnnouncementBar" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" actionLabel="Compact example" actionHref="#announcement-bar-demo" dismissible="true" dismissLabel="Compact example" sticky="false" compact="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><AnnouncementBar badge="Release" message="WRNexusJS UI updates are ready" description="Explore the redesigned responsive components." icon="icon-[lucide--rocket]" actionLabel="Read changes" actionHref="#release" dismissible="true" dismissLabel="Compact example" sticky="false" compact="true" size="sm" width="wide" variant="solid" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Wide solid announcement usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;AnnouncementBar
-  description="A compact configuration for dashboards and dense product surfaces."
+  badge="Release"
-  icon="icon-[lucide--arrow-right]"
+  message="WRNexusJS UI updates are ready"
-  actionLabel="Compact example"
+  description="Explore the redesigned responsive components."
-  actionHref="#announcement-bar-demo"
+  icon="icon-[lucide--rocket]"
+  actionLabel="Read changes"
+  actionHref="#release"
   dismissible="true"
   dismissLabel="Compact example"
   compact="true"
   size="sm"
-  variant="secondary"
+  width="wide"
+  variant="solid"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">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 critical alert</h2><p>Use edge-to-edge width for time-sensitive information that applies to the complete page.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="announcement-bar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AnnouncementBar" description="A richer configuration demonstrating additional content and hierarchy." icon="icon-[lucide--trash-2]" actionLabel="Advanced example" actionHref="#announcement-bar-demo" dismissible="true" dismissLabel="Advanced example" sticky="false" compact="false" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><AnnouncementBar badge="Service alert" message="Scheduled maintenance tonight" description="Some services may be temporarily unavailable from 23:00 to 23:30." icon="icon-[lucide--triangle-alert]" actionLabel="View status" actionHref="#status" dismissible="true" dismissLabel="Advanced example" sticky="false" compact="false" size="lg" width="full" color="warning" variant="solid" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width critical alert usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;AnnouncementBar
-  description="A richer configuration demonstrating additional content and hierarchy."
+  badge="Service alert"
-  icon="icon-[lucide--trash-2]"
+  message="Scheduled maintenance tonight"
-  actionLabel="Advanced example"
+  description="Some services may be temporarily unavailable from 23:00 to 23:30."
-  actionHref="#announcement-bar-demo"
+  icon="icon-[lucide--triangle-alert]"
+  actionLabel="View status"
+  actionHref="#status"
   dismissible="true"
   dismissLabel="Advanced example"
   size="lg"
-  variant="success"
+  width="full"
+  color="warning"
+  variant="solid"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component 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="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>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AnnouncementBar
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>message</code></td><td>string</td><td><code>"Announcement"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--megaphone]"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Dismiss announcement"</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>role</code></td><td>string</td><td><code>"status"</code></td><td>No</td></tr><tr><td><code>live</code></td><td>string</td><td><code>"polite"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+  @dismiss='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=\"AnnouncementBar\"], [data-component=\"AnnouncementBar\"]")
+
+component?.addEventListener("dismiss", (event) =&gt; &#123;
+  console.log("dismiss", 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>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>message</code></td><td>string</td><td><code>"Announcement"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--megaphone]"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Dismiss announcement"</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>role</code></td><td>string</td><td><code>"status"</code></td><td>No</td></tr><tr><td><code>live</code></td><td>string</td><td><code>"polite"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#announcement-bar-demo-1">Production default</a><a href="#announcement-bar-demo-2">Compact application</a><a href="#announcement-bar-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="#announcement-bar-demo-1">Soft product notice</a><a href="#announcement-bar-demo-2">Wide solid announcement</a><a href="#announcement-bar-demo-3">Full-width critical alert</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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_showRemember = (ctx.url.searchParams.get("pg_showRemember") ?? "true") === "true"
-  state playground_showName = ctx.url.searchParams.get("pg_showName") ?? "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;
+component?.addEventListener("submit", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("submit", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/auth-form"><small>Previous</small><strong>← Auth Form</strong></a>
-      <a href="/components/columns"><small>Next</small><strong>Columns →</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_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") ?? "lg"
+  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_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "4")
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
   state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? ""
-  state playground_showTooltips = ctx.url.searchParams.get("pg_showTooltips") ?? "true"
+  state playground_showTooltips = (ctx.url.searchParams.get("pg_showTooltips") ?? "true") === "true"
-  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members"
+  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Avatar Group"
-  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 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",
+      "id": "avatar-group-0-1",
-      "name": "Mark Wanner",
+      "key": "avatar-group-0-1",
-      "alt": "Mark Wanner"
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "src": "/avatar-example-2.svg",
+      "id": "avatar-group-0-2",
-      "name": "Maria Guan",
+      "key": "avatar-group-0-2",
-      "alt": "Maria Guan"
+      "value": "secondary",
-    &#125;,
+      "label": "Additional option",
-    &#123;
+      "title": "Supporting example",
-      "src": "/avatar-example-3.svg",
+      "description": "A clean default configuration for everyday product interfaces.",
-      "name": "Amil Evara",
+      "text": "Another configurable message.",
-      "alt": "Amil Evara"
+      "href": "#avatar-group-demo",
-    &#125;,
+      "actionHref": "#avatar-group-demo",
-    &#123;
+      "actionLabel": "View details",
-      "initials": "EE",
+      "icon": "icon-[lucide--sparkles]",
-      "name": "Ebele Egbuna",
+      "iconClass": "icon-[lucide--sparkles]",
-      "color": "info"
+      "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",
+    "id": "avatar-group-0-1",
-    "name": "Mark Wanner",
+    "key": "avatar-group-0-1",
-    "alt": "Mark Wanner"
+    "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"
+    ]
   },
   {
-    "src": "/avatar-example-2.svg",
+    "id": "avatar-group-0-2",
-    "name": "Maria Guan",
+    "key": "avatar-group-0-2",
-    "alt": "Maria Guan"
+    "value": "secondary",
-  },
+    "label": "Additional option",
-  {
+    "title": "Supporting example",
-    "src": "/avatar-example-3.svg",
+    "description": "A clean default configuration for everyday product interfaces.",
-    "name": "Amil Evara",
+    "text": "Another configurable message.",
-    "alt": "Amil Evara"
+    "href": "#avatar-group-demo",
-  },
+    "actionHref": "#avatar-group-demo",
-  {
+    "actionLabel": "View details",
-    "initials": "EE",
+    "icon": "icon-[lucide--sparkles]",
-    "name": "Ebele Egbuna",
+    "iconClass": "icon-[lucide--sparkles]",
-    "color": "info"
+    "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="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>
+]</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",
+      "id": "avatar-group-0-1",
-      "name": "Mark Wanner",
+      "key": "avatar-group-0-1",
-      "alt": "Mark Wanner"
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "src": "/avatar-example-2.svg",
+      "id": "avatar-group-0-2",
-      "name": "Maria Guan",
+      "key": "avatar-group-0-2",
-      "alt": "Maria Guan"
+      "value": "secondary",
-    &#125;,
+      "label": "Additional option",
-    &#123;
+      "title": "Supporting example",
-      "src": "/avatar-example-3.svg",
+      "description": "A clean default configuration for everyday product interfaces.",
-      "name": "Amil Evara",
+      "text": "Another configurable message.",
-      "alt": "Amil Evara"
+      "href": "#avatar-group-demo",
-    &#125;,
+      "actionHref": "#avatar-group-demo",
-    &#123;
+      "actionLabel": "View details",
-      "initials": "EE",
+      "icon": "icon-[lucide--sparkles]",
-      "name": "Ebele Egbuna",
+      "iconClass": "icon-[lucide--sparkles]",
-      "color": "info"
+      "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",
+      "id": "avatar-group-1-1",
-      "name": "Mark Wanner",
+      "key": "avatar-group-1-1",
-      "alt": "Mark Wanner"
+      "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;
+          "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;
-      "src": "/avatar-example-2.svg",
+      "id": "avatar-group-1-2",
-      "name": "Maria Guan",
+      "key": "avatar-group-1-2",
-      "alt": "Maria Guan"
+      "value": "secondary",
-    &#125;,
+      "label": "Additional option",
-    &#123;
+      "title": "Supporting example",
-      "src": "/avatar-example-3.svg",
+      "description": "A compact configuration designed for dense application layouts.",
-      "name": "Amil Evara",
+      "text": "Another configurable message.",
-      "alt": "Amil Evara"
+      "href": "#avatar-group-demo",
-    &#125;,
+      "actionHref": "#avatar-group-demo",
-    &#123;
+      "actionLabel": "View details",
-      "initials": "EE",
+      "icon": "icon-[lucide--zap]",
-      "name": "Ebele Egbuna",
+      "iconClass": "icon-[lucide--zap]",
-      "color": "info"
+      "variant": "secondary",
-    &#125;,
+      "status": "Active",
-    &#123;
+      "time": "10:15",
-      "initials": "CL",
+      "current": false,
-      "name": "Chris Lynch",
+      "selected": false,
-      "color": "success"
+      "checked": false,
-    &#125;,
+      "disabled": false,
-    &#123;
+      "outgoing": true,
-      "initials": "NS",
+      "open": true,
-      "name": "Nora Singh",
+      "number": 2,
-      "color": "warning"
+      "count": 48,
-    &#125;,
+      "percentage": 48,
-    &#123;
+      "color": "#0284c7",
-      "initials": "JR",
+      "target": "_self",
-      "name": "Jon Rivera",
+      "ariaLabel": "Open secondary workflow 2",
-      "color": "danger"
+      "items": [
-    &#125;,
+        &#123;
-    &#123;
+          "label": "Nested option A",
-      "initials": "AK",
+          "value": "nested-a"
-      "name": "Amina Khan",
+        &#125;,
-      "color": "secondary"
+        &#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;
   ]'
-  layout="grid"
+  size="sm"
-  maxVisible="7"
+  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",
+      "id": "avatar-group-2-1",
-      "name": "Mark Wanner",
+      "key": "avatar-group-2-1",
-      "alt": "Mark Wanner"
+      "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;
+          "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;
-      "src": "/avatar-example-2.svg",
+      "id": "avatar-group-2-2",
-      "name": "Maria Guan",
+      "key": "avatar-group-2-2",
-      "alt": "Maria Guan"
+      "value": "secondary",
-    &#125;,
+      "label": "Additional option",
-    &#123;
+      "title": "Supporting example",
-      "src": "/avatar-example-3.svg",
+      "description": "A richer configuration with more supporting information and actions.",
-      "name": "Amil Evara",
+      "text": "Another configurable message.",
-      "alt": "Amil Evara"
+      "href": "#avatar-group-demo",
-    &#125;,
+      "actionHref": "#avatar-group-demo",
-    &#123;
+      "actionLabel": "Explore workflow",
-      "initials": "EE",
+      "icon": "icon-[lucide--circle-check]",
-      "name": "Ebele Egbuna",
+      "iconClass": "icon-[lucide--circle-check]",
-      "color": "info"
+      "variant": "success",
-    &#125;
+      "status": "Complete",
-  ]'
+      "time": "11:45",
-  borderColor="#2583ff"
+      "current": false,
-/&gt;</code></pre>
+      "selected": false,
-          </section>
+      "checked": false,
-        </div>
+      "disabled": true,
-      </article>
+      "outgoing": true,
-      <article class="demo-case">
+      "open": true,
-        <header class="demo-case-header">
+      "number": 2,
-          <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>
+      "count": 64,
-          <span class="demo-case-number">04</span>
+      "percentage": 91,
-        </header>
+      "color": "#059669",
-        <div class="demo-workbench">
+      "target": "_self",
-          <div id="avatar-group-demo-4" class="demo-canvas demo-canvas--4">
+      "ariaLabel": "Open advanced workflow 2",
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+      "items": [
-            <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>
+        &#123;
-          </div>
+          "label": "Nested option A",
-          <section class="demo-code" aria-label="Member tooltips usage">
+          "value": "nested-a"
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+        &#125;,
-            <pre><code>&lt;AvatarGroup
+        &#123;
-  items='[
+          "label": "Nested option B",
-    &#123;
+          "value": "nested-b"
-      "src": "/avatar-example.svg",
+        &#125;
-      "name": "Mark Wanner",
+      ],
-      "alt": "Mark Wanner"
+      "links": [
-    &#125;,
+        &#123;
-    &#123;
+          "label": "Documentation",
-      "src": "/avatar-example-2.svg",
+          "href": "#documentation"
-      "name": "Maria Guan",
+        &#125;,
-      "alt": "Maria Guan"
+        &#123;
-    &#125;,
+          "label": "API reference",
-    &#123;
+          "href": "#api-reference"
-      "src": "/avatar-example-3.svg",
+        &#125;
-      "name": "Amil Evara",
+      ],
-      "alt": "Amil Evara"
+      "values": [
-    &#125;,
+        "Included",
-    &#123;
+        "Unlimited"
-      "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"
     &#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;
+component?.addEventListener("overflow", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("overflow", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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_src = ctx.url.searchParams.get("pg_src") ?? ""
-  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Example profile portrait"
+  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"
+  statusLabel="Avatar"
-  alt="Example profile portrait"
+  badgeLabel="Avatar"
-  size="xs"
+  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"
+  statusLabel="Avatar"
-  alt="Example profile portrait"
+  badgeLabel="Avatar"
-  size="xs"
+  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>
+  variant="success"
-          </section>
+  statusLabel="Advanced example"
-        </div>
+  badgeLabel="Advanced example"
-      </article>
+  description="A richer configuration demonstrating additional content and hierarchy."
-      <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"
 /&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;
+component?.addEventListener("load", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("load", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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>
+        <p>Provide a responsive floating control that returns long pages to the top and can show scroll progress.</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>
+        <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>
+          <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="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>
+          <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/badge.wrn

@@ -1,25 +1,25 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page BadgeDetail {
   layout = "showcase"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Active"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Badge"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "success"
+  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") ?? "pill"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_dot = ctx.url.searchParams.get("pg_dot") ?? "false"
+  state playground_dot = (ctx.url.searchParams.get("pg_dot") ?? "false") === "true"
-  state playground_dotOnly = ctx.url.searchParams.get("pg_dotOnly") ?? "false"
+  state playground_dotOnly = (ctx.url.searchParams.get("pg_dotOnly") ?? "false") === "true"
-  state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Status"
+  state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Badge"
-  state playground_animated = ctx.url.searchParams.get("pg_animated") ?? "false"
+  state playground_animated = (ctx.url.searchParams.get("pg_animated") ?? "false") === "true"
   state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
   state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
-  state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false"
+  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
-  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Remove badge"
+  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Badge"
-  state playground_truncate = ctx.url.searchParams.get("pg_truncate") ?? "false"
+  state playground_truncate = (ctx.url.searchParams.get("pg_truncate") ?? "false") === "true"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "12rem"
-  state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? ""
+  state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? "Badge"
   state playground_anchorIcon = ctx.url.searchParams.get("pg_anchorIcon") ?? ""
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "inline"
   state playground_anchorLabelText = ctx.url.searchParams.get("pg_anchorLabelText") ?? "Badge anchor"
@@ -40,24 +40,27 @@ page BadgeDetail {
       </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="Badge" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Badge" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="dismiss">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Badge</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="Badge" label="{playground_label}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" class="{playground_class}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" dot="{playground_dot}" dotOnly="{playground_dotOnly}" dotLabel="{playground_dotLabel}" animated="{playground_animated}" avatarSrc="{playground_avatarSrc}" avatarAlt="{playground_avatarAlt}" dismissible="{playground_dismissible}" dismissLabel="{playground_dismissLabel}" truncate="{playground_truncate}" maxWidth="{playground_maxWidth}" anchorLabel="{playground_anchorLabel}" anchorIcon="{playground_anchorIcon}" placement="{playground_placement}" anchorLabelText="{playground_anchorLabelText}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Badge label='{playground_label}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' dot='{playground_dot}' dotOnly='{playground_dotOnly}' dotLabel='{playground_dotLabel}' animated='{playground_animated}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' truncate='{playground_truncate}' maxWidth='{playground_maxWidth}' anchorLabel='{playground_anchorLabel}' anchorIcon='{playground_anchorIcon}' placement='{playground_placement}' anchorLabelText='{playground_anchorLabelText}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Badge
-  label="Active"
+  dotLabel="Badge"
-  color="success"
+  dismissible="true"
+  dismissLabel="Badge"
+  anchorLabel="Badge"
 /&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>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Active" /></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="success" selected>success</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-badge-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-badge-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-badge-shape" name="pg_shape" type="text" value="pill" /></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Status" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Remove badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-badge-maxWidth" name="pg_maxWidth" tyLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Badge" /></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-badge-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-badge-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-badge-shape" name="pg_shape"><option value="pill" selected>pill</option><option value="round">round</option><option value="rounded">rounded</option></select></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Badge" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-badge-maxWidth" name="pg_maxWidth"><option value="12rem" selected>12rem</option><option value="cLine truncated
         </form>
       </div>
     </section>
@@ -66,329 +69,89 @@ page BadgeDetail {
         <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">Color variants</span><h2>Solid badge</h2><p>Use a solid fill for a high-emphasis status or category.</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="badge-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Badge" label="Active" size="md" color="success" variant="solid" shape="pill"></div></div>
+            
+            <div class="demo-render"><Badge label="Badge" size="md" variant="solid" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Badge" animated="false" dismissible="true" dismissLabel="Badge" truncate="false" anchorLabel="Badge" /></div>
           </div>
-          <section class="demo-code" aria-label="Solid badge 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;Badge
-  label="Active"
+  dotLabel="Badge"
-  color="success"
+  dismissible="true"
+  dismissLabel="Badge"
+  anchorLabel="Badge"
 /&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 badge</h2><p>Use a softer fill for a lower-contrast label.</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="badge-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Badge" label="In review" size="md" color="info" variant="soft" shape="pill"></div></div>
+            
+            <div class="demo-render"><Badge label="Compact example" size="sm" variant="secondary" class="showcase-instance showcase-instance--2" icon="icon-[lucide--arrow-right]" dot="false" dotOnly="false" dotLabel="Compact example" animated="false" dismissible="true" dismissLabel="Compact example" truncate="false" anchorLabel="Compact example" /></div>
           </div>
-          <section class="demo-code" aria-label="Soft badge 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;Badge
-  label="In review"
+  label="Compact example"
-  color="info"
+  size="sm"
-  variant="soft"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
+  dotLabel="Compact example"
+  dismissible="true"
+  dismissLabel="Compact example"
+  anchorLabel="Compact example"
 /&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 badge</h2><p>Use an outlined treatment for lighter visual emphasis.</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="badge-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Badge" label="Attention" size="md" color="danger" variant="outline" shape="pill"></div></div>
+            
+            <div class="demo-render"><Badge label="Advanced example" size="lg" variant="success" class="showcase-instance showcase-instance--3" icon="icon-[lucide--trash-2]" dot="false" dotOnly="false" dotLabel="Advanced example" animated="false" dismissible="true" dismissLabel="Advanced example" truncate="false" anchorLabel="Advanced example" /></div>
           </div>
-          <section class="demo-code" aria-label="Outline badge 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;Badge
-  label="Attention"
+  label="Advanced example"
-  color="danger"
+  size="lg"
-  variant="outline"
+  variant="success"
-/&gt;</code></pre>
+  icon="icon-[lucide--trash-2]"
-          </section>
+  dotLabel="Advanced example"
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>White badge</h2><p>Use a neutral surface with a subtle border and shadow.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="Neutral" size="md" color="dark" variant="white" shape="pill"></div></div>
-          </div>
-          <section class="demo-code" aria-label="White badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="Neutral"
-  color="dark"
-  variant="white"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Shape</span><h2>Rounded badge</h2><p>Use softly rounded corners instead of fully pilled edges.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="Category" size="md" color="info" variant="solid" shape="rounded"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Rounded badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="Category"
-  color="info"
-  shape="rounded"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Shape</span><h2>Pill badge</h2><p>Use a pill shape for compact labels and filter chips.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="Pill badge" size="md" color="primary" variant="solid" shape="pill"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Pill badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="Pill badge"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Truncated badge</h2><p>Constrain long badge text while preserving the full value in the API.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="This content is a little too long for the available space" size="md" color="info" variant="solid" shape="rounded" truncate="true" maxWidth="10rem"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Truncated badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="This content is a little too long for the available space"
-  color="info"
-  shape="rounded"
-  truncate="true"
-  maxWidth="10rem"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Status</span><h2>Badge with status dot</h2><p>Add a small dot to reinforce status at a glance.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="Connected" size="md" color="success" variant="soft" shape="pill" dot="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Badge with status dot usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="Connected"
-  color="success"
-  variant="soft"
-  dot="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Badge with icon</h2><p>Pair an icon with text for states, metrics, or trend changes.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="14.5%" size="md" color="success" variant="soft" shape="pill" icon="icon-[lucide--trending-up]"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Badge with 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;Badge
-  label="14.5%"
-  color="success"
-  variant="soft"
-  icon="icon-[lucide--trending-up]"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Interaction</span><h2>Dismissible badge</h2><p>Provide a clear remove action for a selected chip.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="Design" size="md" color="info" variant="soft" shape="pill" dismissible="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Dismissible badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="Design"
-  color="info"
-  variant="soft"
   dismissible="true"
-/&gt;</code></pre>
+  dismissLabel="Advanced example"
-          </section>
+  anchorLabel="Advanced example"
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Badge with avatar</h2><p>Combine a profile image, label, and optional remove action.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="Christina" size="md" color="dark" variant="white" shape="pill" avatarSrc="/avatar-example-2.svg" avatarAlt="Christina" dismissible="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Badge with 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;Badge
-  label="Christina"
-  color="dark"
-  variant="white"
-  avatarSrc="/avatar-example-2.svg"
-  avatarAlt="Christina"
-  dismissible="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Badge inside button</h2><p>Place a badge beside a button label to show a count.</p></div>
-          <span class="demo-case-number">012</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="5" size="xs" color="danger" variant="solid" shape="pill" anchorLabel="Notifications" placement="inline" anchorLabelText="Open notifications"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Badge inside button usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="5"
-  size="xs"
-  color="danger"
-  anchorLabel="Notifications"
-  anchorLabelText="Open notifications"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Positioned badge</h2><p>Anchor a numeric badge to the corner of an icon button.</p></div>
-          <span class="demo-case-number">013</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="99+" size="xs" color="danger" variant="solid" shape="pill" anchorIcon="icon-[lucide--bell]" placement="top-right" anchorLabelText="Open notifications"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Positioned badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="99+"
-  size="xs"
-  color="danger"
-  anchorIcon="icon-[lucide--bell]"
-  placement="top-right"
-  anchorLabelText="Open notifications"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Dot badge</h2><p>Use a small dot when a notification does not need a count.</p></div>
-          <span class="demo-case-number">014</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="" size="md" color="success" variant="solid" shape="pill" dotOnly="true" dotLabel="New notification" anchorIcon="icon-[lucide--bell]" placement="top-right" anchorLabelText="Open notifications"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Dot badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  color="success"
-  dotOnly="true"
-  dotLabel="New notification"
-  anchorIcon="icon-[lucide--bell]"
-  placement="top-right"
-  anchorLabelText="Open notifications"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Animation</span><h2>Ping badge</h2><p>Pulse a notification badge while respecting reduced-motion preferences.</p></div>
-          <span class="demo-case-number">015</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="badge-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="Badge" label="9+" size="md" color="danger" variant="solid" shape="pill" animated="true" anchorIcon="icon-[lucide--shopping-basket]" placement="top-right" anchorLabelText="Open cart"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Ping badge usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Badge
-  label="9+"
-  color="danger"
-  animated="true"
-  anchorIcon="icon-[lucide--shopping-basket]"
-  placement="top-right"
-  anchorLabelText="Open cart"
 /&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>@dismiss</code><span>Fires when the component emits the dismiss 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>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Badge
+  @dismiss='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=\"Badge\"], [data-component=\"Badge\"]")
 
-component.addEventListener('dismiss', (event) =&gt; &#123;
+component?.addEventListener("dismiss", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("dismiss", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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>"Badge"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"pill"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>dot</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotLabel</code></td><td>string</td><td><code>"Status"</code></td><td>No</td></tr><tr><td><code>animated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Remove badge"</code></td><td>No</td></tr><tr><td><code>truncate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"12rem"</code></td><td>No</td></tr><tr><td><code>anchorLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>anchorIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>anchorLabelText</code></td><td>string</td><td><code>"Badge anchor"</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#badge-demo-1">Solid badge</a><a href="#badge-demo-2">Soft badge</a><a href="#badge-demo-3">Outline badge</a><a href="#badge-demo-4">White badge</a><a href="#badge-demo-5">Rounded badge</a><a href="#badge-demo-6">Pill badge</a><a href="#badge-demo-7">Truncated badge</a><a href="#badge-demo-8">Badge with status dot</a><a href="#badge-demo-9">Badge with icon</a><a href="#badge-demo-10">Dismissible badge</a><a href="#badge-demo-11">Badge with avatar</a><a href="#badge-demo-12">Badge inside button</a><a href="#badge-demo-13">Positioned badge</a><a href="#badge-demo-14">Dot badge</a><a href="#badge-demo-15">Ping badge</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="#badge-demo-1">Production default</a><a href="#badge-demo-2">Compact application</a><a href="#badge-demo-3">Rich configuration</a><a href="#events">Events</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_quoteMark = (ctx.url.searchParams.get("pg_quoteMark") ?? "true") === "true"
-  state playground_italic = ctx.url.searchParams.get("pg_italic") ?? "true"
+  state playground_italic = (ctx.url.searchParams.get("pg_italic") ?? "true") === "true"
-  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 = "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."
+  citationTitle="Compact Blockquote"
-  citation="Josh Grazioso"
-  citationTitle="Product designer"
   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."
+  citationTitle="Advanced Blockquote"
-  citation="Josh Grazioso"
-  citationTitle="Source title"
-  citationUrl="#blockquote-demo"
-  avatarSrc="/avatar-example.svg"
-  avatarAlt="Josh Grazioso"
   size="lg"
-  color="success"
+  align="end"
-  variant="bordered"
+  variant="success"
-  quoteMark="false"
 /&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_variant = ctx.url.searchParams.get("pg_variant") ?? "minimal"
-  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_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>
+        <p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</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>
+        <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>
+          <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-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>[
+          <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",
+      "label": "Home",
-      "key": "breadcrumb-0-1",
+      "href": "/",
-      "value": "primary",
+      "icon": "icon-[lucide--house]"
-      "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"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
     &#125;,
     &#123;
-      "id": "breadcrumb-0-2",
+      "label": "Components",
-      "key": "breadcrumb-0-2",
+      "href": "/base"
-      "value": "secondary",
+    &#125;,
-      "label": "Additional option",
+    &#123;
-      "title": "Supporting example",
+      "label": "Page header",
-      "description": "A clean default configuration for everyday product interfaces.",
+      "current": true
-      "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"
-      ]
     &#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",
+      "label": "Home",
-      "key": "breadcrumb-1-1",
+      "href": "/",
-      "value": "primary",
+      "icon": "icon-[lucide--house]"
-      "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"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
     &#125;,
     &#123;
-      "id": "breadcrumb-1-2",
+      "label": "Components",
-      "key": "breadcrumb-1-2",
+      "href": "/base"
-      "value": "secondary",
+    &#125;,
-      "label": "Additional option",
+    &#123;
-      "title": "Supporting example",
+      "label": "Page header",
-      "description": "A compact configuration designed for dense application layouts.",
+      "current": true
-      "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"
-      ]
     &#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",
+      "label": "Home",
-      "key": "breadcrumb-2-1",
+      "href": "/",
-      "value": "primary",
+      "icon": "icon-[lucide--house]"
-      "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"
-        &#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": "breadcrumb-2-2",
+      "label": "Components",
-      "key": "breadcrumb-2-2",
+      "href": "/base"
-      "value": "secondary",
+    &#125;,
-      "label": "Additional option",
+    &#123;
-      "title": "Supporting example",
+      "label": "Page header",
-      "description": "A richer configuration with more supporting information and actions.",
+      "current": true
-      "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"
-      ]
     &#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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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>"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>
+        <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_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") ?? "profile"
+  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_responsive = (ctx.url.searchParams.get("pg_responsive") ?? "false") === "true"
-  state playground_attached = ctx.url.searchParams.get("pg_attached") ?? "true"
+  state playground_attached = (ctx.url.searchParams.get("pg_attached") ?? "true") === "true"
-  state playground_selectable = ctx.url.searchParams.get("pg_selectable") ?? "true"
+  state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "false") === "true"
-  state playground_toolbar = ctx.url.searchParams.get("pg_toolbar") ?? "false"
+  state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button Group 1 example"
-  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 = "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",
+      "id": "button-group-0-1",
-      "value": "profile"
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "label": "Settings",
+      "id": "button-group-0-2",
-      "value": "settings"
+      "key": "button-group-0-2",
-    &#125;,
+      "value": "secondary",
-    &#123;
+      "label": "Additional option",
-      "label": "Messages",
+      "title": "Supporting example",
-      "value": "messages"
+      "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"
+  value="sample-1"
-  variant="outline"
+  ariaLabel="Button Group 1 example"
-  selectable="true"
 /&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",
+    "id": "button-group-0-1",
-    "value": "profile"
+    "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"
+    ]
   },
   {
-    "label": "Settings",
+    "id": "button-group-0-2",
-    "value": "settings"
+    "key": "button-group-0-2",
-  },
+    "value": "secondary",
-  {
+    "label": "Additional option",
-    "label": "Messages",
+    "title": "Supporting example",
-    "value": "messages"
+    "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="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>
+]</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",
+      "id": "button-group-0-1",
-      "value": "profile"
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "label": "Settings",
+      "id": "button-group-0-2",
-      "value": "settings"
+      "key": "button-group-0-2",
-    &#125;,
+      "value": "secondary",
-    &#123;
+      "label": "Additional option",
-      "label": "Messages",
+      "title": "Supporting example",
-      "value": "messages"
+      "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"
+  value="sample-1"
-  variant="outline"
+  ariaLabel="Button Group 1 example"
-  selectable="true"
 /&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",
+      "id": "button-group-1-1",
-      "value": "profile"
+      "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": "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;
-      "label": "Settings",
+      "id": "button-group-1-2",
-      "value": "settings"
+      "key": "button-group-1-2",
-    &#125;,
+      "value": "secondary",
-    &#123;
+      "label": "Additional option",
-      "label": "Messages",
+      "title": "Supporting example",
-      "value": "messages"
+      "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",
+      "id": "button-group-2-1",
-      "value": "profile"
+      "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": "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;
-      "label": "Settings",
+      "id": "button-group-2-2",
-      "value": "settings"
+      "key": "button-group-2-2",
-    &#125;,
+      "value": "secondary",
-    &#123;
+      "label": "Additional option",
-      "label": "Messages",
+      "title": "Supporting example",
-      "value": "messages"
+      "description": "A richer configuration with more supporting information and actions.",
-    &#125;
+      "text": "Another configurable message.",
-  ]'
+      "href": "#button-group-demo",
-  variant="outline"
+      "actionHref": "#button-group-demo",
-/&gt;</code></pre>
+      "actionLabel": "Explore workflow",
-          </section>
+      "icon": "icon-[lucide--circle-check]",
-        </div>
+      "iconClass": "icon-[lucide--circle-check]",
-      </article>
+      "variant": "success",
-      <article class="demo-case">
+      "status": "Complete",
-        <header class="demo-case-header">
+      "time": "11:45",
-          <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>
+      "current": false,
-          <span class="demo-case-number">04</span>
+      "selected": false,
-        </header>
+      "checked": false,
-        <div class="demo-workbench">
+      "disabled": true,
-          <div id="button-group-demo-4" class="demo-canvas demo-canvas--4">
+      "outgoing": true,
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+      "open": true,
-            <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>
+      "number": 2,
-          </div>
+      "count": 64,
-          <section class="demo-code" aria-label="Large usage">
+      "percentage": 91,
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+      "color": "#059669",
-            <pre><code>&lt;ButtonGroup
+      "target": "_self",
-  items='[
+      "ariaLabel": "Open advanced workflow 2",
-    &#123;
+      "items": [
-      "label": "Profile",
+        &#123;
-      "value": "profile"
+          "label": "Nested option A",
-    &#125;,
+          "value": "nested-a"
-    &#123;
+        &#125;,
-      "label": "Settings",
+        &#123;
-      "value": "settings"
+          "label": "Nested option B",
-    &#125;,
+          "value": "nested-b"
-    &#123;
+        &#125;
-      "label": "Messages",
+      ],
-      "value": "messages"
+      "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"
+  variant="success"
-/&gt;</code></pre>
+  ariaLabel="Button Group 3 example"
-          </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"
 /&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;
+component?.addEventListener("click", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("click", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/button.wrn

@@ -12,10 +12,10 @@ page ButtonDetail {
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false"
+  state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
-  state playground_pill = ctx.url.searchParams.get("pg_pill") ?? "false"
+  state playground_pill = (ctx.url.searchParams.get("pg_pill") ?? "false") === "true"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
+  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
   state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
@@ -23,7 +23,7 @@ page ButtonDetail {
   state playground_ariaExpanded = ctx.url.searchParams.get("pg_ariaExpanded") ?? ""
   state playground_ariaControls = ctx.url.searchParams.get("pg_ariaControls") ?? ""
   state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
-  state playground_autofocus = ctx.url.searchParams.get("pg_autofocus") ?? "false"
+  state playground_autofocus = (ctx.url.searchParams.get("pg_autofocus") ?? "false") === "true"
   state playground_controlClass = ctx.url.searchParams.get("pg_controlClass") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -43,12 +43,12 @@ page ButtonDetail {
       </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="Button" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Button" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="click,focus,blur">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Button</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="Button" label="{playground_label}" loadingLabel="{playground_loadingLabel}" description="{playground_description}" as="{playground_as}" href="{playground_href}" target="{playground_target}" rel="{playground_rel}" type="{playground_type}" variant="{playground_variant}" color="{playground_color}" size="{playground_size}" disabled="{playground_disabled}" loading="{playground_loading}" pill="{playground_pill}" fullWidth="{playground_fullWidth}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" ariaLabel="{playground_ariaLabel}" ariaPressed="{playground_ariaPressed}" ariaExpanded="{playground_ariaExpanded}" ariaControls="{playground_ariaControls}" title="{playground_title}" autofocus="{playground_autofocus}" controlClass="{playground_controlClass}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Button label='{playground_label}' loadingLabel='{playground_loadingLabel}' description='{playground_description}' as='{playground_as}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' type='{playground_type}' variant='{playground_variant}' color='{playground_color}' size='{playground_size}' disabled='{playground_disabled}' loading='{playground_loading}' pill='{playground_pill}' fullWidth='{playground_fullWidth}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' ariaLabel='{playground_ariaLabel}' ariaPressed='{playground_ariaPressed}' ariaExpanded='{playground_ariaExpanded}' ariaControls='{playground_ariaControls}' title='{playground_title}' autofocus='{playground_autofocus}' controlClass='{playground_controlClass}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Button
@@ -58,10 +58,11 @@ page ButtonDetail {
 /&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>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save &amp; Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-button-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-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option vLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save &amp; Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-button-ariaLabel"><span><strLine truncated
         </form>
       </div>
     </section>
@@ -76,7 +77,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Button label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Primary action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -96,7 +98,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Button label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Secondary navigation usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -120,7 +123,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Button label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Prominent rounded action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -142,7 +146,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4"></div></div>
+            
+            <div class="demo-render"><Button label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4" /></div>
           </div>
           <section class="demo-code" aria-label="Accessible icon action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -165,7 +170,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5"></div></div>
+            
+            <div class="demo-render"><Button label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5" /></div>
           </div>
           <section class="demo-code" aria-label="Dangerous action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -186,7 +192,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6"></div></div>
+            
+            <div class="demo-render"><Button label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6" /></div>
           </div>
           <section class="demo-code" aria-label="Inline action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -207,7 +214,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7"></div></div>
+            
+            <div class="demo-render"><Button label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7" /></div>
           </div>
           <section class="demo-code" aria-label="Pending action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -228,7 +236,8 @@ page ButtonDetail {
         <div class="demo-workbench">
           <div id="button-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="Button" label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8"></div></div>
+            
+            <div class="demo-render"><Button label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8" /></div>
           </div>
           <section class="demo-code" aria-label="Unavailable action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -241,11 +250,23 @@ page ButtonDetail {
           </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>@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>@click</code><span>Fires when the interactive surface is activated.</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;Button
+  @click='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=\"Button\"], [data-component=\"Button\"]")
 
-component.addEventListener('click', (event) =&gt; &#123;
+component?.addEventListener("click", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("click", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">

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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application."
-  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_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"
+  state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
-  state playground_showAvatars = ctx.url.searchParams.get("pg_showAvatars") ?? "false"
+  state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "true") === "true"
-  state playground_showMetadata = ctx.url.searchParams.get("pg_showMetadata") ?? "false"
+  state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation"
+  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",
+      "id": "chat-bubble-0-1",
-      "direction": "incoming",
+      "key": "chat-bubble-0-1",
-      "author": "Support agent",
+      "value": "primary",
-      "title": "How can we help?",
+      "label": "Primary workflow",
-      "text": "You can ask questions like:",
+      "title": "Primary workflow",
-      "bullets": [
+      "description": "A clean default configuration for everyday product interfaces.",
-        "What\'s WireJS UI?",
+      "text": "A configurable sample message.",
-        "How many component examples are there?",
+      "href": "#chat-bubble-demo",
-        "Is there a PRO version?"
+      "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",
+      "id": "chat-bubble-0-2",
-      "direction": "outgoing",
+      "key": "chat-bubble-0-2",
-      "author": "AZ",
+      "value": "secondary",
-      "text": "what\'s wirejs ui?"
+      "label": "Additional option",
-    &#125;,
+      "title": "Supporting example",
-    &#123;
+      "description": "A clean default configuration for everyday product interfaces.",
-      "id": "answer",
+      "text": "Another configurable message.",
-      "direction": "incoming",
+      "href": "#chat-bubble-demo",
-      "author": "Support agent",
+      "actionHref": "#chat-bubble-demo",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+      "actionLabel": "View details",
-      "links": [
+      "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": "Installation guide",
+          "label": "Nested option A",
-          "href": "/installation"
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
+          "label": "Nested option B",
-          "href": "/framework-guides"
+          "value": "nested-b"
         &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "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",
+    "id": "chat-bubble-0-1",
-    "direction": "incoming",
+    "key": "chat-bubble-0-1",
-    "author": "Support agent",
+    "value": "primary",
-    "title": "How can we help?",
+    "label": "Primary workflow",
-    "text": "You can ask questions like:",
+    "title": "Primary workflow",
-    "bullets": [
+    "description": "A clean default configuration for everyday product interfaces.",
-      "What's WireJS UI?",
+    "text": "A configurable sample message.",
-      "How many component examples are there?",
+    "href": "#chat-bubble-demo",
-      "Is there a PRO version?"
+    "actionHref": "#chat-bubble-demo",
-    ]
+    "actionLabel": "View details",
-  },
+    "icon": "icon-[lucide--sparkles]",
-  {
+    "iconClass": "icon-[lucide--sparkles]",
-    "id": "request",
+    "variant": "primary",
-    "direction": "outgoing",
+    "status": "Active",
-    "author": "AZ",
+    "time": "09:30",
-    "text": "what's wirejs ui?"
+    "current": true,
-  },
+    "selected": true,
-  {
+    "checked": true,
-    "id": "answer",
+    "disabled": false,
-    "direction": "incoming",
+    "outgoing": false,
-    "author": "Support agent",
+    "open": true,
-    "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+    "number": 1,
-    "links": [
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
       {
-        "label": "Installation guide",
+        "label": "Nested option A",
-        "href": "/installation"
+        "value": "nested-a"
       },
       {
-        "label": "Framework guides",
+        "label": "Nested option B",
-        "href": "/framework-guides"
+        "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"
     ]
   }
-]</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",
+      "id": "chat-bubble-0-1",
-      "direction": "incoming",
+      "key": "chat-bubble-0-1",
-      "author": "Support agent",
+      "value": "primary",
-      "title": "How can we help?",
+      "label": "Primary workflow",
-      "text": "You can ask questions like:",
+      "title": "Primary workflow",
-      "bullets": [
+      "description": "A clean default configuration for everyday product interfaces.",
-        "What\'s WireJS UI?",
+      "text": "A configurable sample message.",
-        "How many component examples are there?",
+      "href": "#chat-bubble-demo",
-        "Is there a PRO version?"
+      "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",
+      "id": "chat-bubble-0-2",
-      "direction": "outgoing",
+      "key": "chat-bubble-0-2",
-      "author": "AZ",
+      "value": "secondary",
-      "text": "what\'s wirejs ui?"
+      "label": "Additional option",
-    &#125;,
+      "title": "Supporting example",
-    &#123;
+      "description": "A clean default configuration for everyday product interfaces.",
-      "id": "answer",
+      "text": "Another configurable message.",
-      "direction": "incoming",
+      "href": "#chat-bubble-demo",
-      "author": "Support agent",
+      "actionHref": "#chat-bubble-demo",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+      "actionLabel": "View details",
-      "links": [
+      "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": "Installation guide",
+          "label": "Nested option A",
-          "href": "/installation"
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
+          "label": "Nested option B",
-          "href": "/framework-guides"
+          "value": "nested-b"
         &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "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",
+      "id": "chat-bubble-1-1",
-      "direction": "incoming",
+      "key": "chat-bubble-1-1",
-      "author": "Support agent",
+      "value": "primary",
-      "title": "How can we help?",
+      "label": "Secondary workflow",
-      "text": "You can ask questions like:",
+      "title": "Secondary workflow",
-      "bullets": [
+      "description": "A compact configuration designed for dense application layouts.",
-        "What\'s WireJS UI?",
+      "text": "A configurable sample message.",
-        "How many component examples are there?",
+      "href": "#chat-bubble-demo",
-        "Is there a PRO version?"
+      "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",
+      "id": "chat-bubble-1-2",
-      "direction": "outgoing",
+      "key": "chat-bubble-1-2",
-      "author": "AZ",
+      "value": "secondary",
-      "text": "what\'s wirejs ui?"
+      "label": "Additional option",
-    &#125;,
+      "title": "Supporting example",
-    &#123;
+      "description": "A compact configuration designed for dense application layouts.",
-      "id": "answer",
+      "text": "Another configurable message.",
-      "direction": "incoming",
+      "href": "#chat-bubble-demo",
-      "author": "Support agent",
+      "actionHref": "#chat-bubble-demo",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+      "actionLabel": "View details",
-      "links": [
+      "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": "Installation guide",
+          "label": "Nested option A",
-          "href": "/installation"
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
+          "label": "Nested option B",
-          "href": "/framework-guides"
+          "value": "nested-b"
         &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;
   ]'
-  oneSided="true"
+  showAvatars="true"
-  ariaLabel="One-sided"
+  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",
+      "id": "chat-bubble-2-1",
-      "direction": "incoming",
+      "key": "chat-bubble-2-1",
-      "author": "Support agent",
+      "value": "primary",
-      "title": "How can we help?",
+      "label": "Advanced workflow",
-      "text": "You can ask questions like:",
+      "title": "Advanced workflow",
-      "bullets": [
+      "description": "A richer configuration with more supporting information and actions.",
-        "What\'s WireJS UI?",
+      "text": "A configurable sample message.",
-        "How many component examples are there?",
+      "href": "#chat-bubble-demo",
-        "Is there a PRO version?"
+      "actionHref": "#chat-bubble-demo",
-      ],
+      "actionLabel": "Explore workflow",
-      "avatarSrc": "/avatar-example.svg",
+      "icon": "icon-[lucide--circle-check]",
-      "avatarAlt": "Support agent",
+      "iconClass": "icon-[lucide--circle-check]",
-      "avatarLabel": "View support agent"
+      "variant": "success",
-    &#125;,
+      "status": "Complete",
-    &#123;
+      "time": "11:45",
-      "id": "request",
+      "current": true,
-      "direction": "outgoing",
+      "selected": true,
-      "author": "AZ",
+      "checked": true,
-      "text": "what\'s wirejs ui?",
+      "disabled": false,
-      "avatarFallback": "AZ",
+      "outgoing": false,
-      "avatarLabel": "View AZ"
+      "open": true,
-    &#125;,
+      "number": 1,
-    &#123;
+      "count": 32,
-      "id": "answer",
+      "percentage": 91,
-      "direction": "incoming",
+      "color": "#059669",
-      "author": "Support agent",
+      "target": "_self",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
+      "ariaLabel": "Open advanced workflow 1",
-      "links": [
+      "items": [
         &#123;
-          "label": "Installation guide",
+          "label": "Nested option A",
-          "href": "/installation"
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
+          "label": "Nested option B",
-          "href": "/framework-guides"
+          "value": "nested-b"
         &#125;
       ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent"
-    &#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",
+          "label": "Documentation",
-          "href": "/installation"
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
+          "label": "API reference",
-          "href": "/framework-guides"
+          "href": "#api-reference"
         &#125;
       ],
-      "avatarSrc": "/avatar-example.svg",
+      "values": [
-      "avatarAlt": "Support agent",
+        "Included",
-      "avatarLabel": "View support agent",
+        "Unlimited"
-      "status": "Not sent",
+      ]
-      "statusIcon": "icon-[lucide--circle-alert]",
+    &#125;,
-      "statusTone": "danger",
+    &#123;
-      "action": "retry",
+      "id": "chat-bubble-2-2",
-      "actionLabel": "Retry"
+      "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;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "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;
+component?.addEventListener("action", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("action", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+component?.addEventListener("copy", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("copy", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/color-picker.wrn

@@ -3,23 +3,23 @@ page ColorPickerDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "color-picker-1"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "color-pickerField"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Brand color"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter color picker"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "#2563eb"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
-  state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  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 = "Color Picker"
     description = "Theme-aware, responsive color picker component."
@@ -37,27 +37,26 @@ page ColorPickerDetail {
       </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="ColorPicker" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ColorPicker" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Color 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="ColorPicker" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" variant="{playground_variant}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ColorPicker size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' variant='{playground_variant}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;ColorPicker
-  id="color-picker-1"
+  label="Color Picker"
-  name="color-pickerField"
+  placeholder="Enter a sample value"
-  label="Brand color"
+  value="sample-1"
-  placeholder="Enter color picker"
-  helperText="Helpful context for this field."
 /&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>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="color-picker-1" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="color-pickerField" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Brand color" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="Enter color picker" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="#2563eb" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-color-picker-variant" name="pg_variant"><option value="normal" selected>normal</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-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playgroundLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Color Picker" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-color-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" vLine truncated
         </form>
       </div>
     </section>
@@ -66,216 +65,99 @@ page ColorPickerDetail {
         <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>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</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="color-picker-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-1" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><ColorPicker size="default" label="Color Picker" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default field 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;ColorPicker
-  id="color-picker-1"
+  label="Color Picker"
-  name="color-pickerField"
+  placeholder="Enter a sample value"
-  label="Brand color"
+  value="sample-1"
-  placeholder="Enter color picker"
-  helperText="Helpful context for this field."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</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="color-picker-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-2" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="outlined" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><ColorPicker size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Outlined with start icon 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;ColorPicker
-  id="color-picker-2"
+  size="sm"
-  name="color-pickerField"
+  label="Compact example"
-  label="Brand color"
+  placeholder="Enter a sample value"
-  placeholder="Enter color picker"
+  value="sample-2"
-  icon="icon-[lucide--sparkles]"
+  icon="icon-[lucide--arrow-right]"
-  variant="outlined"
+  variant="secondary"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</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="color-picker-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-3" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" variant="floating" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><ColorPicker size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Floating label 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;ColorPicker
-  id="color-picker-3"
+  size="lg"
-  name="color-pickerField"
+  label="Advanced example"
-  label="Brand color"
+  placeholder="Search by name, email, or identifier"
-  placeholder="Enter color picker"
+  value="sample-3"
-  icon="icon-[lucide--circle-user-round]"
+  icon="icon-[lucide--trash-2]"
-  iconPosition="end"
+  variant="success"
-  variant="floating"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="color-picker-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="ColorPicker" size="sm" color="primary" id="color-picker-4" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="pill" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Pill and compact size usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ColorPicker
-  size="sm"
-  id="color-picker-4"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  variant="pill"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="color-picker-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="ColorPicker" size="default" color="primary" id="color-picker-5" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="true" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Read only usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ColorPicker
-  id="color-picker-5"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  readonly="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="color-picker-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="ColorPicker" size="default" color="primary" id="color-picker-6" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="true" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Disabled usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ColorPicker
-  id="color-picker-6"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  disabled="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="color-picker-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="ColorPicker" size="default" color="primary" id="color-picker-7" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" variant="normal" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Inline helper text usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ColorPicker
-  id="color-picker-7"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  helperText="We'll never share your details."
-  inline="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="color-picker-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="ColorPicker" size="default" color="primary" id="color-picker-8" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Field with corner hint usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ColorPicker
-  id="color-picker-8"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  cornerHint="Optional"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="color-picker-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-9" name="validatedField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
-          </div>
-          <section class="demo-code" aria-label="Validated field usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ColorPicker
-  id="color-picker-9"
-  name="validatedField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  required="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="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>@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>@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>@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;ColorPicker
+  @input='console.log(event.detail)'
+  @change='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=\"ColorPicker\"], [data-component=\"ColorPicker\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", 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>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Color"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"#2563eb"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#color-picker-demo-1">Default field</a><a href="#color-picker-demo-2">Outlined with start icon</a><a href="#color-picker-demo-3">Floating label</a><a href="#color-picker-demo-4">Pill and compact size</a><a href="#color-picker-demo-5">Read only</a><a href="#color-picker-demo-6">Disabled</a><a href="#color-picker-demo-7">Inline helper text</a><a href="#color-picker-demo-8">Field with corner hint</a><a href="#color-picker-demo-9">Validated field</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="#color-picker-demo-1">Production default</a><a href="#color-picker-demo-2">Compact application</a><a href="#color-picker-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/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"
+  size="compact"
-/&gt;</code></pre>
+  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/combo-box.wrn

@@ -6,40 +6,40 @@ page ComboBoxDetail {
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default autocomplete"
   state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1"
   state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n  {\n    \"value\": \"design\",\n    \"label\": \"Design\",\n    \"description\": \"Product and visual design\",\n    \"icon\": \"icon-[lucide--palette]\",\n    \"color\": \"#8b5cf6\",\n    \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n  },\n  {\n    \"value\": \"engineering\",\n    \"label\": \"Engineering\",\n    \"description\": \"Platform and application engineering\",\n    \"icon\": \"icon-[lucide--code-2]\",\n    \"color\": \"#0ea5e9\",\n    \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n  },\n  {\n    \"value\": \"growth\",\n    \"label\": \"Growth\",\n    \"description\": \"Marketing and customer growth\",\n    \"icon\": \"icon-[lucide--trending-up]\",\n    \"color\": \"#10b981\",\n    \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n  },\n  {\n    \"value\": \"support\",\n    \"label\": \"Support\",\n    \"description\": \"Customer operations\",\n    \"icon\": \"icon-[lucide--life-buoy]\",\n    \"color\": \"#f59e0b\"\n  }\n]"
+  state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%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='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%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='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"},{\"value\":\"support\",\"label\":\"Support\",\"description\":\"Customer operations\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]")
-  state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]"
+  state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams"
   state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…"
-  state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true"
+  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
-  state playground_allowCustomValue = ctx.url.searchParams.get("pg_allowCustomValue") ?? "false"
+  state playground_allowCustomValue = (ctx.url.searchParams.get("pg_allowCustomValue") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  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_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
-  state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false"
+  state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
   state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading suggestions…"
   state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options"
   state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value"
   state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions"
   state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains"
   state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description"
-  state playground_minSearchLength = ctx.url.searchParams.get("pg_minSearchLength") ?? "0"
+  state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0")
-  state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0"
+  state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0")
   state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default"
-  state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
-  state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true"
+  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
-  state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false"
+  state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true"
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
   state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
-  state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false"
+  state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true"
   state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
   state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
-  state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250"
+  state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
-  state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true"
+  state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
-  state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false"
+  state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
-  state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false"
+  state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
-  state playground_page = ctx.url.searchParams.get("pg_page") ?? "1"
+  state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
   state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
@@ -59,12 +59,12 @@ page ComboBoxDetail {
       </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="ComboBox" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ComboBox" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="search,select,change,clear,open,close,load,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Combo Box</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="ComboBox" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" options="{playground_options}" groups="{playground_groups}" placeholder="{playground_placeholder}" searchPlaceholder="{playground_searchPlaceholder}" clearable="{playground_clearable}" allowCustomValue="{playground_allowCustomValue}" disabled="{playground_disabled}" required="{playground_required}" invalid="{playground_invalid}" validationMessage="{playground_validationMessage}" helpText="{playground_helpText}" loading="{playground_loading}" loadingLabel="{playground_loadingLabel}" emptyLabel="{playground_emptyLabel}" clearLabel="{playground_clearLabel}" toggleLabel="{playground_toggleLabel}" searchMode="{playground_searchMode}" searchFields="{playground_searchFields}" minSearchLength="{playground_minSearchLength}" searchResultLimit="{playground_searchResultLimit}" optionTemplate="{playground_optionTemplate}" defaultOpen="{playground_defaultOpen}" closeOnSelect="{playground_closeOnSelect}" fixed="{playground_fixed}" placement="{playground_placement}" autocomplete="{playground_autocomplete}" remote="{playground_remote}" remoteUrl="{playground_remoteUrl}" remoteQueryParam="{playground_remoteQueryParam}" remoteDebounce="{playground_remoteDebounce}" remoteAutoLoad="{playground_remoteAutoLoad}" infinite="{playground_infinite}" hasMore="{playground_hasMore}" page="{playground_page}" loadMoreLabel="{playground_loadMoreLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ComboBox size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' options='{playground_options}' groups='{playground_groups}' placeholder='{playground_placeholder}' searchPlaceholder='{playground_searchPlaceholder}' clearable='{playground_clearable}' allowCustomValue='{playground_allowCustomValue}' disabled='{playground_disabled}' required='{playground_required}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' helpText='{playground_helpText}' loading='{playground_loading}' loadingLabel='{playground_loadingLabel}' emptyLabel='{playground_emptyLabel}' clearLabel='{playground_clearLabel}' toggleLabel='{playground_toggleLabel}' searchMode='{playground_searchMode}' searchFields='{playground_searchFields}' minSearchLength='{playground_minSearchLength}' searchResultLimit='{playground_searchResultLimit}' optionTemplate='{playground_optionTemplate}' defaultOpen='{playground_defaultOpen}' closeOnSelect='{playground_closeOnSelect}' fixed='{playground_fixed}' placement='{playground_placement}' autocomplete='{playground_autocomplete}' remote='{playground_remote}' remoteUrl='{playground_remoteUrl}' remoteQueryParam='{playground_remoteQueryParam}' remoteDebounce='{playground_remoteDebounce}' remoteAutoLoad='{playground_remoteAutoLoad}' infinite='{playground_infinite}' hasMore='{playground_hasMore}' page='{playground_page}' loadMoreLabel='{playground_loadMoreLabel}' 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;ComboBox
@@ -77,7 +77,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -85,7 +85,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -93,7 +93,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -108,6 +108,7 @@ page ComboBoxDetail {
 /&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>41 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -143,7 +144,7 @@ page ComboBoxDetail {
     "icon": "icon-[lucide--life-buoy]",
     "color": "#f59e0b"
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><select id="playground-combo-box-searchMode" name="pg_searchMode"><option value="contains" selected>contains</option><option value="startsWith">startsWith</option><option value="exact">exact</option></select></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strLine truncated
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-combo-box-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-combo-box-searchResultLimit" name="pg_searchResultLimit" tLine truncated
         </form>
       </div>
     </section>
@@ -158,7 +159,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="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="demo-render"><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>
           <section class="demo-code" aria-label="Default autocomplete usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -172,7 +174,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -180,7 +182,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -188,7 +190,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -212,7 +214,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Local HTML options" name="combobox-2" 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="demo-render"><ComboBox label="Local HTML options" name="combobox-2" 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>
           <section class="demo-code" aria-label="Local HTML options usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -226,7 +229,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -234,7 +237,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -242,7 +245,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -266,7 +269,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Grouped suggestions" name="combobox-3" value="" options="[]" groups="[{&quot;label&quot;:&quot;Product&quot;,&quot;options&quot;:[{&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;label&quot;:&quot;Business&quot;,&quot;options&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;}]}]" 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="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","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"}]},{"label":"Business","options":[{"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"}]}]' 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>
           <section class="demo-code" aria-label="Grouped suggestions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -284,7 +288,7 @@ page ComboBoxDetail {
           "description": "Product and visual design",
           "icon": "icon-[lucide--palette]",
           "color": "#8b5cf6",
-          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+          "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"
         &#125;,
         &#123;
           "value": "engineering",
@@ -292,7 +296,7 @@ page ComboBoxDetail {
           "description": "Platform and application engineering",
           "icon": "icon-[lucide--code-2]",
           "color": "#0ea5e9",
-          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+          "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"
         &#125;
       ]
     &#125;,
@@ -305,7 +309,7 @@ page ComboBoxDetail {
           "description": "Marketing and customer growth",
           "icon": "icon-[lucide--trending-up]",
           "color": "#10b981",
-          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+          "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"
         &#125;,
         &#123;
           "value": "support",
@@ -330,7 +334,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Minimum search length" name="combobox-4" 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="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" 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="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Minimum search length usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -344,7 +349,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -352,7 +357,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -360,7 +365,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -385,7 +390,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Search result limit" name="combobox-5" 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="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" 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="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Search result limit usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +405,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -407,7 +413,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -415,7 +421,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -440,7 +446,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Starts-with matching" name="combobox-6" 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="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" 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="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Starts-with matching usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -454,7 +461,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -462,7 +469,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -470,7 +477,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -495,7 +502,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Search labels and descriptions" name="combobox-7" 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="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" 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>
           <section class="demo-code" aria-label="Search labels and descriptions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -509,7 +517,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -517,7 +525,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -525,7 +533,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -549,7 +557,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Suggestions with icons" name="combobox-8" 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="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" 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="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Suggestions with icons usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -563,7 +572,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -571,7 +580,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -579,7 +588,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -604,7 +613,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Suggestions with avatars" name="combobox-9" 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="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" 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="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Suggestions with avatars usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -618,7 +628,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -626,7 +636,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -634,7 +644,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -659,7 +669,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Suggestions with color indicators" name="combobox-10" 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="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" 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="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Suggestions with color indicators usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -673,7 +684,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -681,7 +692,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -689,7 +700,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -714,7 +725,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Clearable value" name="combobox-11" 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="demo-render"><ComboBox label="Clearable value" name="combobox-11" 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>
           <section class="demo-code" aria-label="Clearable value usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -728,7 +740,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -736,7 +748,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -744,7 +756,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -768,7 +780,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Custom text values" name="combobox-12" 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="true" 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="demo-render"><ComboBox label="Custom text values" name="combobox-12" 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="true" 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>
           <section class="demo-code" aria-label="Custom text values usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -782,7 +795,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -790,7 +803,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -798,7 +811,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -823,7 +836,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Preselected value" name="combobox-13" value="engineering" 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="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" 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>
           <section class="demo-code" aria-label="Preselected value usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -838,7 +852,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -846,7 +860,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -854,7 +868,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -878,7 +892,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Disabled combobox" name="combobox-14" 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="true" 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="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" 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="true" 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>
           <section class="demo-code" aria-label="Disabled combobox usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -892,7 +907,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -900,7 +915,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -908,7 +923,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -933,7 +948,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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"><form data-schema="combobox-validation" class="demo-validation-form"><div data-component="ComboBox" label="Validation state" name="combobox-15" 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="true" 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><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
+            
+            <div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" 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="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><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>
@@ -947,7 +963,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -955,7 +971,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -963,7 +979,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -988,7 +1004,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Remote data with automatic preload" name="combobox-16" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Remote data with automatic preload usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1002,7 +1019,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -1010,7 +1027,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -1018,7 +1035,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -1045,7 +1062,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-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="ComboBox" label="Remote search API" name="combobox-17" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Remote search API usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1059,7 +1077,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -1067,7 +1085,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -1075,7 +1093,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -1102,7 +1120,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ComboBox" label="Remote query parameters" name="combobox-18" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Remote query parameters usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1116,7 +1135,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -1124,7 +1143,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -1132,7 +1151,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -1159,7 +1178,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ComboBox" label="Infinite remote suggestions" name="combobox-19" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" 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 remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
           </div>
           <section class="demo-code" aria-label="Infinite remote suggestions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1173,7 +1193,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -1181,7 +1201,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -1189,7 +1209,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -1218,7 +1238,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ComboBox" label="Fixed-position suggestions" name="combobox-20" 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="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" 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="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Fixed-position suggestions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1232,7 +1253,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -1240,7 +1261,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -1248,7 +1269,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -1273,7 +1294,8 @@ page ComboBoxDetail {
         <div class="demo-workbench">
           <div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ComboBox" label="JavaScript methods" name="combobox-21" 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="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" 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>
           <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>
@@ -1287,7 +1309,7 @@ page ComboBoxDetail {
       "description": "Product and visual design",
       "icon": "icon-[lucide--palette]",
       "color": "#8b5cf6",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "engineering",
@@ -1295,7 +1317,7 @@ page ComboBoxDetail {
       "description": "Platform and application engineering",
       "icon": "icon-[lucide--code-2]",
       "color": "#0ea5e9",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "growth",
@@ -1303,7 +1325,7 @@ page ComboBoxDetail {
       "description": "Marketing and customer growth",
       "icon": "icon-[lucide--trending-up]",
       "color": "#10b981",
-      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+      "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"
     &#125;,
     &#123;
       "value": "support",
@@ -1319,11 +1341,48 @@ page ComboBoxDetail {
           </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>@search</code><span>Fires when the search query changes or is submitted.</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><code>@clear</code><span>Fires after the current value or collection is cleared.</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>@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><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>@search</code><span>Fires when the current search query changes.</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><code>@clear</code><span>Fires after the current value or selection is cleared.</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>@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><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;ComboBox
+  @search='console.log(event.detail)'
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @clear='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @load='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=\"ComboBox\"], [data-component=\"ComboBox\"]")
 
-component.addEventListener('search', (event) =&gt; &#123;
+component?.addEventListener("search", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("search", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", 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("load", (event) =&gt; &#123;
+  console.log("load", 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>"ComboBox"</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>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Search or select an option"</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Start typing…"</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>allowCustomValue</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>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>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading suggestions…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No matching options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear value"</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Toggle suggestions"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>hasMore</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</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/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;
+component?.addEventListener("start", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("start", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+  size="compact"
-  &lt;!-- Add default slot content here --&gt;
+  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;
+  size="spacious"
-  &lt;!-- Add default slot content here --&gt;
+  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/context-menu.wrn

@@ -1,17 +1,27 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ContextMenuDetail {
   layout = "showcase"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]")
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "click"
+  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "pointer"
+  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Context Menu example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default context menu for a modern application."
-  state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Context Menu"
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
+  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
-  state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Context Menu"
+  state playground_closeOnOutside = (ctx.url.searchParams.get("pg_closeOnOutside") ?? "true") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_minWidth = ctx.url.searchParams.get("pg_minWidth") ?? "14rem"
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "20rem"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Context Menu"
-    description = "Theme-aware, responsive context menu component."
+    description = "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,31 +31,170 @@ page ContextMenuDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Context Menu</h1>
-        <p>Theme-aware, responsive context menu component.</p>
+        <p>Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.</p>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>18 props</span><span>4 slots</span><span>4 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="ContextMenu" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ContextMenu" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="open,close,select,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Context 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="ContextMenu" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" open="{playground_open}" placement="{playground_placement}" closeLabel="{playground_closeLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ContextMenu items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' trigger='{playground_trigger}' placement='{playground_placement}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' title='{playground_title}' description='{playground_description}' label='{playground_label}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' minWidth='{playground_minWidth}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div data-slot="trigger"><div class="showcase-context-target">Right-click for contextual actions</div></div></ContextMenu></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;ContextMenu
+  items='[
+    &#123;
+      "id": "context-menu-0-1",
+      "key": "context-menu-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#context-menu-demo",
+      "actionHref": "#context-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#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": "context-menu-0-2",
+      "key": "context-menu-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#context-menu-demo",
+      "actionHref": "#context-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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;
+  ]'
   title="Context Menu example"
   description="A polished default context menu for a modern application."
-  open="true"
+  label="Context Menu"&gt;
-  closeLabel="Context Menu"
+  &lt;div data-slot="trigger"&gt;
-/&gt;</code></pre>
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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>
+          <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="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-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-context-menu-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-context-menu-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-context-menu-closeLabel" name="pg_closeLabel" type="text" value="Context Menu" /></label><label class="playground-field" for="playground-context-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-context-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-context-menu-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-context-menu-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "label": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
+  },
+  {
+    "label": "Share record",
+    "value": "share",
+    "icon": "icon-[lucide--share-2]",
+    "shortcut": "Ctrl S"
+  },
+  {
+    "type": "divider"
+  },
+  {
+    "label": "Delete record",
+    "value": "delete",
+    "icon": "icon-[lucide--trash-2]",
+    "danger": true
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-context-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-context-menu-trigger" name="pg_trigger"><option value="click" selected>click</option><option value="contextmenu">contextmenu</option><option value="both">both</option><option value="manual">manual</option><option value="hover">hover</option><option value="focus">focus</option></select></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-context-menu-placement" name="pg_placement"><option value="pointer" selected>pointer</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-context-menu-align"><span><strong>align</strong><small>string</small></span><select id="playground-context-menu-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-context-menu-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-field" for="playground-context-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-context-menu-label" name="pg_label" type="text" value="Context Menu" /></label><label class="playground-toggle" for="playground-context-menu-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-context-menu-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-context-menu-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></labLine truncated
         </form>
       </div>
     </section>
@@ -54,78 +203,199 @@ page ContextMenuDetail {
         <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>Right-click record actions</h2><p>Expose actions that apply to the selected record or canvas location.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="context-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="ContextMenu" size="default" title="Context Menu example" description="A polished default context menu for a modern application." open="true" closeLabel="Context Menu" class="showcase-instance showcase-instance--1"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Right-click or use the trigger button</p>
+            <div class="demo-render"><ContextMenu items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" trigger="contextmenu" placement="pointer" align="start" size="default" variant="raised" title="Record actions" description="Right-click the target surface" label="Context Menu" closeOnSelect="true" closeOnOutside="true" disabled="false" class="showcase-instance showcase-instance--1"><div data-slot="trigger"><div class="showcase-context-target">Right-click for contextual actions</div></div></ContextMenu></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Right-click record actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ContextMenu
-  title="Context Menu example"
+  items='[
-  description="A polished default context menu for a modern application."
+    &#123;
-  open="true"
+      "label": "Open dashboard",
-  closeLabel="Context Menu"
+      "description": "View the operational workspace",
-/&gt;</code></pre>
+      "value": "dashboard",
+      "icon": "icon-[lucide--layout-dashboard]"
+    &#125;,
+    &#123;
+      "label": "Share record",
+      "value": "share",
+      "icon": "icon-[lucide--share-2]",
+      "shortcut": "Ctrl S"
+    &#125;,
+    &#123;
+      "type": "divider"
+    &#125;,
+    &#123;
+      "label": "Delete record",
+      "value": "delete",
+      "icon": "icon-[lucide--trash-2]",
+      "danger": true
+    &#125;
+  ]'
+  title="Record actions"
+  description="Right-click the target surface"
+  label="Context Menu"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-context-target"&gt;Right-click for contextual actions&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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>Click-triggered compact menu</h2><p>Use a button-triggered context menu when discoverability matters.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="context-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="ContextMenu" size="sm" title="Compact Context Menu" description="A compact configuration for dashboards and dense product surfaces." open="true" closeLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Right-click or use the trigger button</p>
+            <div class="demo-render"><ContextMenu items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" trigger="click" align="center" size="sm" variant="secondary" title="Quick actions" description="A compact configuration for dashboards and dense product surfaces." label="Compact example" closeOnSelect="true" closeOnOutside="true" disabled="false" minWidth="12rem" class="showcase-instance showcase-instance--2"><div data-slot="trigger"><button type="button" class="showcase-action">Open quick actions</button></div></ContextMenu></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Click-triggered compact menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ContextMenu
+  items='[
+    &#123;
+      "label": "Open dashboard",
+      "description": "View the operational workspace",
+      "value": "dashboard",
+      "icon": "icon-[lucide--layout-dashboard]"
+    &#125;,
+    &#123;
+      "label": "Share record",
+      "value": "share",
+      "icon": "icon-[lucide--share-2]",
+      "shortcut": "Ctrl S"
+    &#125;,
+    &#123;
+      "type": "divider"
+    &#125;,
+    &#123;
+      "label": "Delete record",
+      "value": "delete",
+      "icon": "icon-[lucide--trash-2]",
+      "danger": true
+    &#125;
+  ]'
+  trigger="click"
+  align="center"
   size="sm"
-  title="Compact Context Menu"
+  variant="secondary"
+  title="Quick actions"
   description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
+  label="Compact example"
-  closeLabel="Compact example"
+  minWidth="12rem"&gt;
-/&gt;</code></pre>
+  &lt;div data-slot="trigger"&gt;
+    &lt;button type="button" class="showcase-action"&gt;Open quick actions&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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>Pointer and keyboard menu</h2><p>Support right-click, click, and keyboard activation without forcing the menu open.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="context-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="ContextMenu" size="lg" title="Advanced Context Menu" description="A richer configuration demonstrating additional content and hierarchy." open="true" closeLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Right-click or use the trigger button</p>
+            <div class="demo-render"><ContextMenu items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" trigger="both" placement="bottom-start" align="end" size="lg" variant="soft" title="Accessible actions" description="A richer configuration demonstrating additional content and hierarchy." label="Advanced example" closeOnSelect="true" closeOnOutside="true" disabled="false" class="showcase-instance showcase-instance--3"><div data-slot="trigger"><button type="button" class="showcase-action">Click, press Enter, or right-click</button></div></ContextMenu></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Pointer and keyboard menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ContextMenu
+  items='[
+    &#123;
+      "label": "Open dashboard",
+      "description": "View the operational workspace",
+      "value": "dashboard",
+      "icon": "icon-[lucide--layout-dashboard]"
+    &#125;,
+    &#123;
+      "label": "Share record",
+      "value": "share",
+      "icon": "icon-[lucide--share-2]",
+      "shortcut": "Ctrl S"
+    &#125;,
+    &#123;
+      "type": "divider"
+    &#125;,
+    &#123;
+      "label": "Delete record",
+      "value": "delete",
+      "icon": "icon-[lucide--trash-2]",
+      "danger": true
+    &#125;
+  ]'
+  trigger="both"
+  placement="bottom-start"
+  align="end"
   size="lg"
-  title="Advanced Context Menu"
+  variant="soft"
+  title="Accessible actions"
   description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
+  label="Advanced example"&gt;
-  closeLabel="Advanced example"
+  &lt;div data-slot="trigger"&gt;
-/&gt;</code></pre>
+    &lt;button type="button" class="showcase-action"&gt;Click, press Enter, or right-click&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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><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;ContextMenu
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @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=\"ContextMenu\"], [data-component=\"ContextMenu\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
+component?.addEventListener("open", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("open", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
-        <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>"Context Menu"</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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</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("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>trigger</code></td><td>string</td><td><code>"contextmenu"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"pointer"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>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>label</code></td><td>string</td><td><code>"Context menu"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>minWidth</code></td><td>string</td><td><code>"14rem"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"20rem"</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="#context-menu-demo-1">Production default</a><a href="#context-menu-demo-2">Compact application</a><a href="#context-menu-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="#context-menu-demo-1">Right-click record actions</a><a href="#context-menu-demo-2">Click-triggered compact menu</a><a href="#context-menu-demo-3">Pointer and keyboard menu</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/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_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  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;
+component?.addEventListener("copy", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("copy", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/ctasection.wrn

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

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;
+component?.addEventListener("scroll", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("scroll", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/data-table.wrn

@@ -4,9 +4,9 @@ page DataTableDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Data Table"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n  {\n    \"id\": \"data-table-0-1\",\n    \"key\": \"data-table-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-table-demo\",\n    \"actionHref\": \"#data-table-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-table-0-2\",\n    \"key\": \"data-table-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-table-demo\",\n    \"actionHref\": \"#data-table-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 = JSON.parse(ctx.url.searchParams.get("pg_columns") ?? "[{\"id\":\"data-table-0-1\",\"key\":\"data-table-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-table-demo\",\"actionHref\":\"#data-table-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-table-0-2\",\"key\":\"data-table-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-table-demo\",\"actionHref\":\"#data-table-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_rows = ctx.url.searchParams.get("pg_rows") ?? "[\n  {\n    \"id\": \"data-table-0-1\",\n    \"key\": \"data-table-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-table-demo\",\n    \"actionHref\": \"#data-table-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-table-0-2\",\n    \"key\": \"data-table-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-table-demo\",\n    \"actionHref\": \"#data-table-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_rows = JSON.parse(ctx.url.searchParams.get("pg_rows") ?? "[{\"id\":\"data-table-0-1\",\"key\":\"data-table-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-table-demo\",\"actionHref\":\"#data-table-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-table-0-2\",\"key\":\"data-table-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-table-demo\",\"actionHref\":\"#data-table-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_striped = ctx.url.searchParams.get("pg_striped") ?? "true"
+  state playground_striped = (ctx.url.searchParams.get("pg_striped") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Data Table"
@@ -25,12 +25,12 @@ page DataTableDetail {
       </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="DataTable" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DataTable" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="sort,select,change,rowClick,pageChange">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Data Table</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="DataTable" size="{playground_size}" color="{playground_color}" caption="{playground_caption}" columns="{playground_columns}" rows="{playground_rows}" striped="{playground_striped}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><DataTable size='{playground_size}' color='{playground_color}' caption='{playground_caption}' columns='{playground_columns}' rows='{playground_rows}' striped='{playground_striped}' 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;DataTable
@@ -253,6 +253,7 @@ page DataTableDetail {
 /&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>
@@ -485,7 +486,8 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-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="DataTable" size="default" columns="[{&quot;id&quot;:&quot;data-table-0-1&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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-table-0-2&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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;]}]" rows="[{&quot;id&quot;:&quot;data-table-0-1&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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-table-0-2&quot;,&quot;key&quot;:&quot;data-table-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting examLine truncated
+            
+            <div class="demo-render"><DataTable size="default" columns='[{"id":"data-table-0-1","key":"data-table-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-table-demo","actionHref":"#data-table-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-table-0-2","key":"data-table-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-table-demo","actionHref":"#data-table-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"]}]' rows='[{"id":"data-table-0-1","key":"data-table-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-table-demo","actionHref":"#data-table-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-table-0-2","key":"data-table-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-table-demo","actionHref":"#data-table-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"]}]' striped="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>
@@ -718,7 +720,8 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-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="DataTable" size="sm" columns="[{&quot;id&quot;:&quot;data-table-1-1&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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-table-1-2&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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;]}]" rows="[{&quot;id&quot;:&quot;data-table-1-1&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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-table-1-2&quot;,&quot;key&quot;:&quot;data-table-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&qLine truncated
+            
+            <div class="demo-render"><DataTable size="sm" columns='[{"id":"data-table-1-1","key":"data-table-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-table-demo","actionHref":"#data-table-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-table-1-2","key":"data-table-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-table-demo","actionHref":"#data-table-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"]}]' rows='[{"id":"data-table-1-1","key":"data-table-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-table-demo","actionHref":"#data-table-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-table-1-2","key":"data-table-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-table-demo","actionHref":"#data-table-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"]}]' striped="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>
@@ -952,7 +955,8 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-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="DataTable" size="lg" columns="[{&quot;id&quot;:&quot;data-table-2-1&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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-table-2-2&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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;]}]" rows="[{&quot;id&quot;:&quot;data-table-2-1&quot;,&quot;key&quot;:&quot;data-table-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-table-demo&quot;,&quot;actionHref&quot;:&quot;#data-table-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-table-2-2&quot;,&quot;key&quot;:&quot;data-table-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quotLine truncated
+            
+            <div class="demo-render"><DataTable size="lg" columns='[{"id":"data-table-2-1","key":"data-table-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-table-demo","actionHref":"#data-table-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-table-2-2","key":"data-table-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-table-demo","actionHref":"#data-table-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"]}]' rows='[{"id":"data-table-2-1","key":"data-table-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-table-demo","actionHref":"#data-table-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-table-2-2","key":"data-table-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-table-demo","actionHref":"#data-table-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"]}]' striped="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>
@@ -1178,11 +1182,33 @@ page DataTableDetail {
           </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>@sort</code><span>Fires when the component emits the sort event.</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><code>@rowClick</code><span>Fires when the component emits the row Click event.</span></div><div><code>@pageChange</code><span>Fires when the component emits the page Change 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>@sort</code><span>Fires when the component emits the sort event.</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><code>@rowClick</code><span>Fires when the component emits the rowClick event.</span></div><div><code>@pageChange</code><span>Fires when the component emits the pageChange 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;DataTable
+  @sort='console.log(event.detail)'
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @rowClick='console.log(event.detail)'
+  @pageChange='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=\"DataTable\"], [data-component=\"DataTable\"]")
 
-component.addEventListener('sort', (event) =&gt; &#123;
+component?.addEventListener("sort", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("sort", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;)
+
+component?.addEventListener("rowClick", (event) =&gt; &#123;
+  console.log("rowClick", event.detail)
+&#125;)
+
+component?.addEventListener("pageChange", (event) =&gt; &#123;
+  console.log("pageChange", 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>caption</code></td><td>string</td><td><code>"Data Table"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>striped</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">

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

@@ -10,7 +10,7 @@ page DatePickerDetail {
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "date"
   state playground_locale = ctx.url.searchParams.get("pg_locale") ?? "en-US"
-  state playground_firstDayOfWeek = ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0"
+  state playground_firstDayOfWeek = Number(ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0")
   state playground_months = ctx.url.searchParams.get("pg_months") ?? ""
   state playground_days = ctx.url.searchParams.get("pg_days") ?? ""
   state playground_years = ctx.url.searchParams.get("pg_years") ?? ""
@@ -21,10 +21,10 @@ page DatePickerDetail {
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
-  state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  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 = "Date Picker"
@@ -43,12 +43,12 @@ page DatePickerDetail {
       </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="DatePicker" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DatePicker" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,open,close,focus,blur,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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="DatePicker" size="{playground_size}" color="{playground_color}" label="{playground_label}" id="{playground_id}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" locale="{playground_locale}" firstDayOfWeek="{playground_firstDayOfWeek}" months="{playground_months}" days="{playground_days}" years="{playground_years}" min="{playground_min}" max="{playground_max}" step="{playground_step}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" variant="{playground_variant}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><DatePicker size='{playground_size}' color='{playground_color}' label='{playground_label}' id='{playground_id}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' locale='{playground_locale}' firstDayOfWeek='{playground_firstDayOfWeek}' months='{playground_months}' days='{playground_days}' years='{playground_years}' min='{playground_min}' max='{playground_max}' step='{playground_step}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' variant='{playground_variant}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;DatePicker
@@ -57,10 +57,11 @@ page DatePickerDetail {
 /&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>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>string</small></span><input id="playground-date-picker-months" name="pg_months" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>string</small></span><input id="playground-date-picker-days" name="pg_days" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>string</small></span><input id="playground-date-picker-years" name="pg_years" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-date-picker-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">dLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>string</small></span><input id="playground-date-picker-months" name="pg_months" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>string</small></span><input id="playground-date-picker-days" name="pg_days" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>string</small></span><input id="playground-date-picker-years" name="pg_years" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" forLine truncated
         </form>
       </div>
     </section>
@@ -75,7 +76,8 @@ page DatePickerDetail {
         <div class="demo-workbench">
           <div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <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>
@@ -94,7 +96,8 @@ page DatePickerDetail {
         <div class="demo-workbench">
           <div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DatePicker" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" firstDayOfWeek="0" variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><DatePicker size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" firstDayOfWeek="0" variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <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>
@@ -116,7 +119,8 @@ page DatePickerDetail {
         <div class="demo-workbench">
           <div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DatePicker" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" variant="success" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><DatePicker size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" variant="success" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <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>
@@ -130,11 +134,43 @@ page DatePickerDetail {
           </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>@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><code>@invalid</code><span>Fires when the component emits the invalid 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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</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><code>@invalid</code><span>Fires when the component emits the invalid 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;DatePicker
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+  @invalid='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=\"DatePicker\"], [data-component=\"DatePicker\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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("focus", (event) =&gt; &#123;
+  console.log("focus", event.detail)
+&#125;)
+
+component?.addEventListener("blur", (event) =&gt; &#123;
+  console.log("blur", event.detail)
+&#125;)
+
+component?.addEventListener("invalid", (event) =&gt; &#123;
+  console.log("invalid", 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>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>string</td><td><code>[&#123; label: "Jan", value: "01" &#125;, &#123; label: "Feb", value: "02" &#125;, &#123; label: "Mar", value: "03" &#125;, &#123; label: "Apr", value: "04" &#125;, &#123; label: "May", value: "05" &#125;, &#123; label: "Jun", value: "06" &#125;, &#123; label: "Jul", value: "07" &#125;, &#123; label: "Aug", value: "08" &#125;, &#123; label: "Sep", value: "09" &#125;, &#123; label: "Oct", value: "10" &#125;, &#123; label: "Nov", value: "11" &#125;, &#123; label: "Dec", value: "12" &#125;]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>string</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>string</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </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;
+component?.addEventListener("change", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("change", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+component?.addEventListener("dragStart", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("dragStart", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/drawer.wrn

@@ -1,17 +1,28 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page DrawerDetail {
   layout = "showcase"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "right"
+  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drawer example"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drawer playground"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drawer for a modern application."
-  state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Drawer"
   state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Drawer"
+  state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true"
+  state playground_closeOnBackdrop = (ctx.url.searchParams.get("pg_closeOnBackdrop") ?? "true") === "true"
+  state playground_closeOnEscape = (ctx.url.searchParams.get("pg_closeOnEscape") ?? "true") === "true"
+  state playground_overlay = (ctx.url.searchParams.get("pg_overlay") ?? "true") === "true"
+  state playground_scrollable = (ctx.url.searchParams.get("pg_scrollable") ?? "true") === "true"
+  state playground_triggerLabel = ctx.url.searchParams.get("pg_triggerLabel") ?? "Open playground drawer"
+  state playground_triggerIcon = ctx.url.searchParams.get("pg_triggerIcon") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Drawer"
-    description = "Theme-aware, responsive drawer component."
+    description = "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,31 +32,41 @@ page DrawerDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Drawer</h1>
-        <p>Theme-aware, responsive drawer component.</p>
+        <p>Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.</p>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>19 props</span><span>4 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="Drawer" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Drawer" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="open,close,cancel">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Drawer</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="Drawer" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" open="{playground_open}" placement="{playground_placement}" closeLabel="{playground_closeLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Drawer open='{playground_open}' defaultOpen='{playground_defaultOpen}' placement='{playground_placement}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' label='{playground_label}' closeLabel='{playground_closeLabel}' showClose='{playground_showClose}' closeOnBackdrop='{playground_closeOnBackdrop}' closeOnEscape='{playground_closeOnEscape}' overlay='{playground_overlay}' scrollable='{playground_scrollable}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' class='{playground_class}'><div class="showcase-overlay-content"><p>Place forms, filters, navigation, or record details here.</p></div><div data-slot="footer"><button type="button" class="showcase-action showcase-action--primary">Save changes</button></div></Drawer></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;Drawer
   title="Drawer example"
   description="A polished default drawer for a modern application."
-  open="true"
   closeLabel="Drawer"
-/&gt;</code></pre>
+  triggerLabel="Drawer"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Drawer&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>
+          <header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-drawer-size"><span><strong>size</strong><small>string</small></span><select id="playground-drawer-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-drawer-color"><span><strong>color</strong><small>string</small></span><select id="playground-drawer-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-drawer-title"><span><strong>title</strong><small>string</small></span><input id="playground-drawer-title" name="pg_title" type="text" value="Drawer example" /></label><label class="playground-field" for="playground-drawer-description"><span><strong>description</strong><small>string</small></span><input id="playground-drawer-description" name="pg_description" type="text" value="A polished default drawer for a modern application." /></label><label class="playground-toggle" for="playground-drawer-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-drawer-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawer-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-drawer-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-drawer-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-drawer-closeLabel" name="pg_closeLabel" type="text" value="Drawer" /></label><label class="playground-field" for="playground-drawer-class"><span><strong>class</strong><small>string</small></span><input id="playground-drawer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-toggle" for="playground-drawer-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-drawer-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-drawer-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-drawer-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawer-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-drawer-placement" name="pg_placement"><option value="right" selected>right</option><option value="left">left</option><option value="top">top</option><option value="bottom">bottom</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-drawer-size"><span><strong>size</strong><small>string</small></span><select id="playground-drawer-size" name="pg_size"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="xs">xs</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drawer-color"><span><strong>color</strong><small>string</small></span><select id="playground-drawer-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-drawer-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-drawer-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="outline">outline</option><option value="solid">solid</option></select></label><label class="playground-field" for="playground-drawer-title"><span><strong>title</strong><small>string</small></span><input id="playground-drawer-title" name="pg_title" type="text" value="Drawer playground" /></label><label class="playground-field" for="playground-drawer-description"><span><strong>description</strong><small>string</small></span><input id="playground-drawer-description" name="pg_description" type="text" value="A polished default drawer for a modern application." /></label><label class="playground-field" for="playground-drawer-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-drawer-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-drawer-label"><span><strong>label</strong><small>string</small></span><input id="playground-drawer-label" name="pg_label" type="text" value="Drawer" /></label><label class="playground-field" for="playground-drawer-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-drawer-closeLabel" name="pg_closeLabel" type="text" value="Drawer" /></label><label class="playground-toggle" for="playground-drawer-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-drawer-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-drawer-closeOnBackdrop"><span><strong>close On Backdrop</strong><small>boolean</small></span><input id="playground-drawer-closeOnBackdrop" name="pg_closeOnBackdrop" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-drawer-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-drawer-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-drawer-overlay"><span><strong>overlay</strong><small>boolean</small></span><input id="playground-drawer-overlay" name="pg_overlay" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="plLine truncated
         </form>
       </div>
     </section>
@@ -54,78 +75,134 @@ page DrawerDetail {
         <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>Right-side detail drawer</h2><p>Keep supporting record details or forms available without leaving the page.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="drawer-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="Drawer" size="default" title="Drawer example" description="A polished default drawer for a modern application." open="true" closeLabel="Drawer" class="showcase-instance showcase-instance--1"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p>
+            <div class="demo-render"><Drawer open="false" defaultOpen="false" placement="right" size="md" variant="default" title="Citizen service details" description="Review supporting information without leaving the current page." icon="icon-[lucide--panel-right]" label="Drawer" closeLabel="Drawer" showClose="true" closeOnBackdrop="true" closeOnEscape="true" overlay="true" scrollable="true" triggerLabel="Open drawer" triggerIcon="icon-[lucide--panel-right-open]" class="showcase-instance showcase-instance--1"><div class="showcase-overlay-content"><p>Place forms, filters, navigation, or record details here.</p></div><div data-slot="footer"><button type="button" class="showcase-action showcase-action--primary">Save changes</button></div></Drawer></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Right-side detail drawer 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;Drawer
-  title="Drawer example"
+  title="Citizen service details"
-  description="A polished default drawer for a modern application."
+  description="Review supporting information without leaving the current page."
-  open="true"
+  icon="icon-[lucide--panel-right]"
   closeLabel="Drawer"
-/&gt;</code></pre>
+  triggerLabel="Open drawer"
+  triggerIcon="icon-[lucide--panel-right-open]"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-overlay-content"&gt;&lt;p&gt;Place forms, filters, navigation, or record details here.&lt;/p&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;button type="button" class="showcase-action showcase-action--primary"&gt;Save changes&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/Drawer&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>Bottom mobile drawer</h2><p>Use a bottom sheet for compact mobile workflows and contextual actions.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="drawer-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="Drawer" size="sm" title="Compact Drawer" description="A compact configuration for dashboards and dense product surfaces." open="true" closeLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p>
+            <div class="demo-render"><Drawer open="false" defaultOpen="false" placement="bottom" size="sm" variant="soft" title="Choose an action" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" label="Compact example" closeLabel="Compact example" showClose="true" closeOnBackdrop="true" closeOnEscape="true" overlay="true" scrollable="true" triggerLabel="Open mobile sheet" class="showcase-instance showcase-instance--2"><div class="showcase-overlay-content"><p>Mobile-friendly supporting actions.</p></div></Drawer></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Bottom mobile drawer 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;Drawer
+  placement="bottom"
   size="sm"
-  title="Compact Drawer"
+  variant="soft"
+  title="Choose an action"
   description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
+  icon="icon-[lucide--arrow-right]"
+  label="Compact example"
   closeLabel="Compact example"
-/&gt;</code></pre>
+  triggerLabel="Open mobile sheet"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-overlay-content"&gt;&lt;p&gt;Mobile-friendly supporting actions.&lt;/p&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Drawer&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>Wide navigation drawer</h2><p>Open a wide, scrollable drawer with custom header and footer content from an explicit trigger.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="drawer-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="Drawer" size="lg" title="Advanced Drawer" description="A richer configuration demonstrating additional content and hierarchy." open="true" closeLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p>
+            <div class="demo-render"><Drawer open="false" defaultOpen="false" placement="left" size="lg" variant="success" title="Navigation and filters" description="A wide drawer for complex supporting workflows." icon="icon-[lucide--trash-2]" label="Advanced example" closeLabel="Advanced example" showClose="true" closeOnBackdrop="true" closeOnEscape="true" overlay="true" scrollable="true" triggerLabel="Open navigation drawer" triggerIcon="icon-[lucide--panel-left-open]" class="showcase-instance showcase-instance--3"><div class="showcase-overlay-content showcase-overlay-content--tall"><p>Long scrollable content</p><p>Filters, navigation, details, and forms can be composed here.</p></div></Drawer></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Wide navigation drawer 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;Drawer
+  placement="left"
   size="lg"
-  title="Advanced Drawer"
+  variant="success"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  title="Navigation and filters"
-  open="true"
+  description="A wide drawer for complex supporting workflows."
+  icon="icon-[lucide--trash-2]"
+  label="Advanced example"
   closeLabel="Advanced example"
-/&gt;</code></pre>
+  triggerLabel="Open navigation drawer"
+  triggerIcon="icon-[lucide--panel-left-open]"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-overlay-content showcase-overlay-content--tall"&gt;&lt;p&gt;Long scrollable content&lt;/p&gt;&lt;p&gt;Filters, navigation, details, and forms can be composed here.&lt;/p&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Drawer&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>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</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>@cancel</code><span>Fires when the user cancels or dismisses the current workflow.</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;Drawer
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @cancel='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=\"Drawer\"], [data-component=\"Drawer\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
+component?.addEventListener("open", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("open", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
-        <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>"Drawer"</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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</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("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("cancel", (event) =&gt; &#123;
+  console.log("cancel", 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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"right"</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>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close drawer"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>overlay</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>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="#drawer-demo-1">Production default</a><a href="#drawer-demo-2">Compact application</a><a href="#drawer-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="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</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/dropdown.wrn

@@ -1,15 +1,26 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page DropdownDetail {
   layout = "showcase"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]")
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Open playground menu"
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  state playground_showChevron = (ctx.url.searchParams.get("pg_showChevron") ?? "true") === "true"
+  state playground_menuLabel = ctx.url.searchParams.get("pg_menuLabel") ?? "Dropdown"
+  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start"
+  state playground_width = ctx.url.searchParams.get("pg_width") ?? "md"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Dropdown"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"dropdown-0-1\",\n    \"key\": \"dropdown-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\": \"#dropdown-demo\",\n    \"actionHref\": \"#dropdown-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\": \"dropdown-0-2\",\n    \"key\": \"dropdown-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\": \"#dropdown-demo\",\n    \"actionHref\": \"#dropdown-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_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "end"
+  state playground_closeOnOutside = (ctx.url.searchParams.get("pg_closeOnOutside") ?? "true") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "Dropdown"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Dropdown"
-    description = "Theme-aware, responsive dropdown component."
+    description = "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,21 +30,20 @@ page DropdownDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Dropdown</h1>
-        <p>Theme-aware, responsive dropdown component.</p>
+        <p>Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.</p>
-        <div class="detail-badges"><span>6 props</span><span>3 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>17 props</span><span>4 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="Dropdown" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Dropdown" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,open,close,select,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Dropdown</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="Dropdown" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" placement="{playground_placement}" class="{playground_class}"><div slot="trigger" class="showcase-slot">trigger slot</div><div slot="header" class="showcase-slot">header slot</div><div slot="footer" class="showcase-slot">footer slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><Dropdown items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' label='{playground_label}' icon='{playground_icon}' showChevron='{playground_showChevron}' menuLabel='{playground_menuLabel}' placement='{playground_placement}' width='{playground_width}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' emptyLabel='{playground_emptyLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Dropdown
-  label="Dropdown"
   items='[
     &#123;
       "id": "dropdown-0-1",
@@ -141,122 +151,49 @@ page DropdownDetail {
         "Standard"
       ]
     &#125;
-  ]'&gt;
+  ]'
-  &lt;!-- Add trigger, header, footer slot content here --&gt;
+  label="Dropdown"
+  menuLabel="Dropdown"
+  emptyLabel="Dropdown"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Dropdown&gt;</code></pre>
           </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>
+          <header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="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-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "dropdown-0-1",
+    "label": "Open dashboard",
-    "key": "dropdown-0-1",
+    "description": "View the operational workspace",
-    "value": "primary",
+    "value": "dashboard",
-    "label": "Primary workflow",
+    "icon": "icon-[lucide--layout-dashboard]"
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#dropdown-demo",
-    "actionHref": "#dropdown-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      {
-        "label": "Nested option A",
-        "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": "dropdown-0-2",
+    "label": "Share record",
-    "key": "dropdown-0-2",
+    "value": "share",
-    "value": "secondary",
+    "icon": "icon-[lucide--share-2]",
-    "label": "Additional option",
+    "shortcut": "Ctrl S"
-    "title": "Supporting example",
+  },
-    "description": "A clean default configuration for everyday product interfaces.",
+  {
-    "text": "Another configurable message.",
+    "type": "divider"
-    "href": "#dropdown-demo",
+  },
-    "actionHref": "#dropdown-demo",
+  {
-    "actionLabel": "View details",
+    "label": "Delete record",
-    "icon": "icon-[lucide--sparkles]",
+    "value": "delete",
-    "iconClass": "icon-[lucide--sparkles]",
+    "icon": "icon-[lucide--trash-2]",
-    "variant": "primary",
+    "danger": true
-    "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-dropdown-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-dropdown-placement" name="pg_placement" type="text" value="end" /></label><label class="playground-field" for="playground-dropdown-class"><span><strong>class</strong><small>string</small></span><input id="playground-dropdown-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-dropdown-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Open playground menu" /></label><label class="playground-field" for="playground-dropdown-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-dropdown-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-dropdown-showChevron"><span><strong>show Chevron</strong><small>boolean</small></span><input id="playground-dropdown-showChevron" name="pg_showChevron" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-menuLabel"><span><strong>menu Label</strong><small>string</small></span><input id="playground-dropdown-menuLabel" name="pg_menuLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-dropdown-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-dropdown-width"><span><strong>width</strong><small>string</small></span><select id="playground-dropdown-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option></select></label><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-dropdown-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-dropdown-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-dropdown-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-dropdown-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-dropdown-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated
         </form>
       </div>
     </section>
@@ -265,396 +202,205 @@ page DropdownDetail {
         <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>Action dropdown</h2><p>Group related actions behind one compact trigger.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="dropdown-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Dropdown" size="default" label="Dropdown" items="[{&quot;id&quot;:&quot;dropdown-0-1&quot;,&quot;key&quot;:&quot;dropdown-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;#dropdown-demo&quot;,&quot;actionHref&quot;:&quot;#dropdown-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;dropdown-0-2&quot;,&quot;key&quot;:&quot;dropdown-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;#dropdown-demo&quot;,&quot;actionHref&quot;:&quot;#dropdown-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 slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><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>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
+            <div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Open actions" icon="icon-[lucide--menu]" showChevron="true" menuLabel="Dropdown" placement="bottom-start" width="lg" size="default" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Dropdown" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Action dropdown usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Dropdown
-  label="Dropdown"
   items='[
     &#123;
-      "id": "dropdown-0-1",
+      "label": "Open dashboard",
-      "key": "dropdown-0-1",
+      "description": "View the operational workspace",
-      "value": "primary",
+      "value": "dashboard",
-      "label": "Primary workflow",
+      "icon": "icon-[lucide--layout-dashboard]"
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#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": "dropdown-0-2",
+      "label": "Share record",
-      "key": "dropdown-0-2",
+      "value": "share",
-      "value": "secondary",
+      "icon": "icon-[lucide--share-2]",
-      "label": "Additional option",
+      "shortcut": "Ctrl S"
-      "title": "Supporting example",
+    &#125;,
-      "description": "A clean default configuration for everyday product interfaces.",
+    &#123;
-      "text": "Another configurable message.",
+      "type": "divider"
-      "href": "#dropdown-demo",
+    &#125;,
-      "actionHref": "#dropdown-demo",
+    &#123;
-      "actionLabel": "View details",
+      "label": "Delete record",
-      "icon": "icon-[lucide--sparkles]",
+      "value": "delete",
-      "iconClass": "icon-[lucide--sparkles]",
+      "icon": "icon-[lucide--trash-2]",
-      "variant": "primary",
+      "danger": true
-      "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;
-  ]'&gt;
+  ]'
-  &lt;!-- Add trigger, header, footer slot content here --&gt;
+  label="Open actions"
+  icon="icon-[lucide--menu]"
+  menuLabel="Dropdown"
+  width="lg"
+  emptyLabel="Dropdown"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Dropdown&gt;</code></pre>
           </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 overflow menu</h2><p>Use an icon-led compact menu in tables, cards, and toolbars.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="dropdown-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Dropdown" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;dropdown-1-1&quot;,&quot;key&quot;:&quot;dropdown-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;#dropdown-demo&quot;,&quot;actionHref&quot;:&quot;#dropdown-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;dropdown-1-2&quot;,&quot;key&quot;:&quot;dropdown-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;#dropdown-demo&quot;,&quot;actionHref&quot;:&quot;#dropdown-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 slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><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>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
+            <div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="More actions" icon="icon-[lucide--ellipsis]" showChevron="false" menuLabel="Compact example" width="sm" size="sm" variant="soft" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact overflow menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Dropdown
-  size="sm"
-  label="Compact example"
   items='[
     &#123;
-      "id": "dropdown-1-1",
+      "label": "Open dashboard",
-      "key": "dropdown-1-1",
+      "description": "View the operational workspace",
-      "value": "primary",
+      "value": "dashboard",
-      "label": "Secondary workflow",
+      "icon": "icon-[lucide--layout-dashboard]"
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-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": "dropdown-1-2",
+      "label": "Share record",
-      "key": "dropdown-1-2",
+      "value": "share",
-      "value": "secondary",
+      "icon": "icon-[lucide--share-2]",
-      "label": "Additional option",
+      "shortcut": "Ctrl S"
-      "title": "Supporting example",
+    &#125;,
-      "description": "A compact configuration designed for dense application layouts.",
+    &#123;
-      "text": "Another configurable message.",
+      "type": "divider"
-      "href": "#dropdown-demo",
+    &#125;,
-      "actionHref": "#dropdown-demo",
+    &#123;
-      "actionLabel": "View details",
+      "label": "Delete record",
-      "icon": "icon-[lucide--zap]",
+      "value": "delete",
-      "iconClass": "icon-[lucide--zap]",
+      "icon": "icon-[lucide--trash-2]",
-      "variant": "secondary",
+      "danger": true
-      "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;
-  ]'&gt;
+  ]'
-  &lt;!-- Add trigger, header, footer slot content here --&gt;
+  label="More actions"
+  icon="icon-[lucide--ellipsis]"
+  showChevron="false"
+  menuLabel="Compact example"
+  width="sm"
+  size="sm"
+  variant="soft"
+  emptyLabel="Compact example"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Dropdown&gt;</code></pre>
           </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>Detailed action menu</h2><p>Open the menu from its trigger to preview placement, descriptions, shortcuts, danger states, and event output.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="dropdown-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Dropdown" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;dropdown-2-1&quot;,&quot;key&quot;:&quot;dropdown-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;#dropdown-demo&quot;,&quot;actionHref&quot;:&quot;#dropdown-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;dropdown-2-2&quot;,&quot;key&quot;:&quot;dropdown-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;#dropdown-demo&quot;,&quot;actionHref&quot;:&quot;#dropdown-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 slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><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>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
+            <div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Review detailed menu" icon="icon-[lucide--trash-2]" showChevron="true" menuLabel="Advanced example" placement="bottom-end" width="xl" size="lg" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Detailed action menu usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Dropdown
-  size="lg"
-  label="Advanced example"
   items='[
     &#123;
-      "id": "dropdown-2-1",
+      "label": "Open dashboard",
-      "key": "dropdown-2-1",
+      "description": "View the operational workspace",
-      "value": "primary",
+      "value": "dashboard",
-      "label": "Advanced workflow",
+      "icon": "icon-[lucide--layout-dashboard]"
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-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;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
     &#125;,
     &#123;
-      "id": "dropdown-2-2",
+      "label": "Share record",
-      "key": "dropdown-2-2",
+      "value": "share",
-      "value": "secondary",
+      "icon": "icon-[lucide--share-2]",
-      "label": "Additional option",
+      "shortcut": "Ctrl S"
-      "title": "Supporting example",
+    &#125;,
-      "description": "A richer configuration with more supporting information and actions.",
+    &#123;
-      "text": "Another configurable message.",
+      "type": "divider"
-      "href": "#dropdown-demo",
+    &#125;,
-      "actionHref": "#dropdown-demo",
+    &#123;
-      "actionLabel": "Explore workflow",
+      "label": "Delete record",
-      "icon": "icon-[lucide--circle-check]",
+      "value": "delete",
-      "iconClass": "icon-[lucide--circle-check]",
+      "icon": "icon-[lucide--trash-2]",
-      "variant": "success",
+      "danger": true
-      "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;
-  ]'&gt;
+  ]'
-  &lt;!-- Add trigger, header, footer slot content here --&gt;
+  label="Review detailed menu"
+  icon="icon-[lucide--trash-2]"
+  menuLabel="Advanced example"
+  placement="bottom-end"
+  width="xl"
+  size="lg"
+  emptyLabel="Advanced example"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Dropdown&gt;</code></pre>
           </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>@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>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</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>@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;Dropdown
+  @toggle='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @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=\"Dropdown\"], [data-component=\"Dropdown\"]")
 
-component.addEventListener('toggle', (event) =&gt; &#123;
+component?.addEventListener("toggle", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("toggle", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
-        <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>"Open 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>placement</code></td><td>string</td><td><code>"end"</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("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;)
+
+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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Open menu"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showChevron</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>menuLabel</code></td><td>string</td><td><code>"Dropdown menu"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom-start"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No menu items"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#dropdown-demo-1">Production default</a><a href="#dropdown-demo-2">Compact application</a><a href="#dropdown-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="#dropdown-demo-1">Action dropdown</a><a href="#dropdown-demo-2">Compact overflow menu</a><a href="#dropdown-demo-3">Detailed action menu</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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

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

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_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_size = ctx.url.searchParams.get("pg_size") ?? "default"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
+  state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
-  state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
+  state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
-  state playground_mobileColumns = 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>
+        <p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</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>
+        <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>
+          <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-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>
+          <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"
+  icon="icon-[lucide--shield-check]"
-  description="A polished default feature icon card for a modern application."
+  title="Secure by design"
-  href="#feature-icon-card-demo"
+  description="Build with consistent validation, accessibility, and theme support."
-  actionLabel="Feature Icon Card"
+  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]"
+  icon="icon-[lucide--gauge]"
-  title="Compact Feature Icon Card"
+  iconVariant="solid"
-  description="A compact configuration for dashboards and dense product surfaces."
+  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]"
+  icon="icon-[lucide--workflow]"
-  title="Advanced Feature Icon Card"
+  title="Composable workflows"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  description="Connect forms, services, data, and actions without duplicating UI."
-  href="#feature-icon-card-demo"
+  href="#workflows"
-  actionLabel="Advanced example"
+  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-input.wrn

@@ -3,25 +3,25 @@ page FileInputDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "file-input-1"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "file-inputField"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Profile image"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Input"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose an image"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_accept = ctx.url.searchParams.get("pg_accept") ?? "image/png,image/jpeg"
+  state playground_accept = ctx.url.searchParams.get("pg_accept") ?? ""
-  state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
+  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
-  state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  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 = "File Input"
     description = "Theme-aware, responsive file input component."
@@ -39,28 +39,26 @@ page FileInputDetail {
       </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="FileInput" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileInput" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,select,clear,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure File 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="FileInput" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" accept="{playground_accept}" multiple="{playground_multiple}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" variant="{playground_variant}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><FileInput size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' accept='{playground_accept}' multiple='{playground_multiple}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' variant='{playground_variant}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;FileInput
-  id="file-input-1"
+  label="File Input"
-  name="file-inputField"
+  placeholder="Enter a sample value"
-  label="Profile image"
+  value="sample-1"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  helperText="Helpful context for this field."
 /&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>21 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-file-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-file-input-id" name="pg_id" type="text" value="file-input-1" /></label><label class="playground-field" for="playground-file-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-file-input-name" name="pg_name" type="text" value="file-inputField" /></label><label class="playground-field" for="playground-file-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-input-label" name="pg_label" type="text" value="Profile image" /></label><label class="playground-toggle" for="playground-file-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-file-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-file-input-placeholder" name="pg_placeholder" type="text" value="Choose an image" /></label><label class="playground-field" for="playground-file-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-file-input-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-file-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-file-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-file-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-file-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-file-input-accept"><span><strong>accept</strong><small>string</small></span><input id="playground-file-input-accept" name="pg_accept" type="text" value="image/png,image/jpeg" /></label><label class="playground-toggle" for="playground-file-input-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-file-input-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-file-input-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-file-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-file-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-file-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-file-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-file-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-file-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-file-input-variant" name="pg_variant"><option value="normal" selected>normal</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-toggle" for="playground-file-input-readonly"><span><strongLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-file-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-file-input-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-file-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-file-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-file-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-input-label" name="pg_label" type="text" value="File Input" /></label><label class="playground-toggle" for="playground-file-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-file-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-file-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-file-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-file-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-file-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-file-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-file-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-file-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-file-input-accept"><span><strong>accept</strong><small>string</small></span><input id="playground-file-input-accept" name="pg_accept" type="text" value="" /></label><label class="playground-toggle" for="playground-file-input-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-file-input-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-file-input-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-file-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-file-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-file-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-file-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-file-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-file-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-file-input-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-file-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-file-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-file-input-disabled">Line truncated
         </form>
       </div>
     </section>
@@ -69,225 +67,114 @@ page FileInputDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</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-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="FileInput" size="default" color="primary" id="file-input-1" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><FileInput size="default" label="File Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" multiple="false" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default field 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;FileInput
-  id="file-input-1"
+  label="File Input"
-  name="file-inputField"
+  placeholder="Enter a sample value"
-  label="Profile image"
+  value="sample-1"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  helperText="Helpful context for this field."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</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-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 data-component="FileInput" size="default" color="primary" id="file-input-2" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="icon-[lucide--sparkles]" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="outlined" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><FileInput size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" multiple="false" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Outlined with start icon 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;FileInput
-  id="file-input-2"
+  size="sm"
-  name="file-inputField"
+  label="Compact example"
-  label="Profile image"
+  placeholder="Enter a sample value"
-  placeholder="Choose an image"
+  value="sample-2"
-  icon="icon-[lucide--sparkles]"
+  icon="icon-[lucide--arrow-right]"
-  accept="image/png,image/jpeg"
+  variant="secondary"
-  variant="outlined"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</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-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="FileInput" size="default" color="primary" id="file-input-3" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="icon-[lucide--circle-user-round]" iconPosition="end" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="floating" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><FileInput size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Floating label 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;FileInput
-  id="file-input-3"
+  size="lg"
-  name="file-inputField"
+  label="Advanced example"
-  label="Profile image"
+  placeholder="Search by name, email, or identifier"
-  placeholder="Choose an image"
+  value="sample-3"
-  icon="icon-[lucide--circle-user-round]"
+  icon="icon-[lucide--trash-2]"
-  iconPosition="end"
+  variant="success"
-  accept="image/png,image/jpeg"
-  variant="floating"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-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="FileInput" size="sm" color="primary" id="file-input-4" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="pill" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Pill and compact size usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileInput
-  size="sm"
-  id="file-input-4"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  variant="pill"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-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="FileInput" size="default" color="primary" id="file-input-5" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="true" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Read only usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileInput
-  id="file-input-5"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  readonly="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-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="FileInput" size="default" color="primary" id="file-input-6" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="true" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Disabled usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileInput
-  id="file-input-6"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  disabled="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-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="FileInput" size="default" color="primary" id="file-input-7" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" variant="normal" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Inline helper text usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileInput
-  id="file-input-7"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  helperText="We'll never share your details."
-  inline="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-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="FileInput" size="default" color="primary" id="file-input-8" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="Optional" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Field with corner hint usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileInput
-  id="file-input-8"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  cornerHint="Optional"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="FileInput" size="default" color="primary" id="file-input-9" name="validatedField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
-          </div>
-          <section class="demo-code" aria-label="Validated field usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileInput
-  id="file-input-9"
-  name="validatedField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  required="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="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>@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><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid 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>@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><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid 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;FileInput
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+  @select='console.log(event.detail)'
+  @clear='console.log(event.detail)'
+  @invalid='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=\"FileInput\"], [data-component=\"FileInput\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", 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;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", event.detail)
+&#125;)
+
+component?.addEventListener("invalid", (event) =&gt; &#123;
+  console.log("invalid", 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>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"File"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Choose a file"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--upload]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>accept</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Default field</a><a href="#file-input-demo-2">Outlined with start icon</a><a href="#file-input-demo-3">Floating label</a><a href="#file-input-demo-4">Pill and compact size</a><a href="#file-input-demo-5">Read only</a><a href="#file-input-demo-6">Disabled</a><a href="#file-input-demo-7">Inline helper text</a><a href="#file-input-demo-8">Field with corner hint</a><a href="#file-input-demo-9">Validated field</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-input-demo-1">Production default</a><a href="#file-input-demo-2">Compact application</a><a href="#file-input-demo-3">Rich configuration</a><a href="#events">Events</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_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "42"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
+  state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
-  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "design-system.zip"
+  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? ""
-  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "20 MB"
+  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? ""
-  state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "8.4 MB"
+  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"
+  label="File Upload Progress"
-  value="42"
+  value="36"
-  fileName="design-system.zip"
-  fileSize="20 MB"
-  uploadedSize="8.4 MB"
   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"
+  label="File Upload Progress"
-  value="42"
+  value="36"
-  fileName="design-system.zip"
-  fileSize="20 MB"
-  uploadedSize="8.4 MB"
   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"
+  label="Compact example"
-  value="2"
+  value="60"
-  fileName="product-images.tar"
-  fileSize="48 MB"
-  uploadedSize="640 KB"
   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"
+  label="Advanced example"
-  value="92"
+  value="84"
-  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"
   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;
+component?.addEventListener("cancel", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("cancel", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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_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 = ctx.url.searchParams.get("pg_columns") ?? "3"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "4")
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "compact"
+  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",
+    "type": "header",
-    "key": "footer-0-1",
+    "label": "Product",
-    "value": "primary",
+    "description": "Build consistent interfaces with WRNexusJS.",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#footer-demo",
-    "actionHref": "#footer-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
     "items": [
       {
-        "label": "Nested option A",
+        "label": "Components",
-        "value": "nested-a"
+        "href": "/base"
       },
       {
-        "label": "Nested option B",
+        "label": "Themes",
-        "value": "nested-b"
+        "href": "/themes"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
       },
       {
-        "label": "API reference",
+        "label": "Examples",
-        "href": "#api-reference"
+        "href": "/blocks"
       }
-    ],
-    "values": [
-      "Included",
-      "Standard"
     ]
   },
   {
-    "id": "footer-0-2",
+    "type": "header",
-    "key": "footer-0-2",
+    "label": "Developers",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#footer-demo",
-    "actionHref": "#footer-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
       {
         "label": "Documentation",
-        "href": "#documentation"
+        "href": "/docs"
       },
       {
-        "label": "API reference",
+        "label": "Installation",
-        "href": "#api-reference"
+        "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",
+      "type": "header",
-      "key": "footer-0-1",
+      "label": "Product",
-      "value": "primary",
+      "description": "Build consistent interfaces with WRNexusJS.",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
       "items": [
         &#123;
-          "label": "Nested option A",
+          "label": "Components",
-          "value": "nested-a"
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
+          "label": "Themes",
-          "value": "nested-b"
+          "href": "/themes"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "API reference",
+          "label": "Examples",
-          "href": "#api-reference"
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "footer-0-2",
+      "type": "header",
-      "key": "footer-0-2",
+      "label": "Developers",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
       "items": [
-        &#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",
+          "label": "Installation",
-          "href": "#api-reference"
+          "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",
+      "type": "header",
-      "key": "footer-1-1",
+      "label": "Product",
-      "value": "primary",
+      "description": "Build consistent interfaces with WRNexusJS.",
-      "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",
       "items": [
         &#123;
-          "label": "Nested option A",
+          "label": "Components",
-          "value": "nested-a"
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
+          "label": "Themes",
-          "value": "nested-b"
+          "href": "/themes"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "API reference",
+          "label": "Examples",
-          "href": "#api-reference"
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "footer-1-2",
+      "type": "header",
-      "key": "footer-1-2",
+      "label": "Developers",
-      "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",
       "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",
+          "label": "Installation",
-          "href": "#api-reference"
+          "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",
+      "type": "header",
-      "key": "footer-2-1",
+      "label": "Product",
-      "value": "primary",
+      "description": "Build consistent interfaces with WRNexusJS.",
-      "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",
       "items": [
         &#123;
-          "label": "Nested option A",
+          "label": "Components",
-          "value": "nested-a"
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
+          "label": "Themes",
-          "value": "nested-b"
+          "href": "/themes"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "API reference",
+          "label": "Examples",
-          "href": "#api-reference"
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     &#125;,
     &#123;
-      "id": "footer-2-2",
+      "type": "header",
-      "key": "footer-2-2",
+      "label": "Developers",
-      "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",
       "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",
+          "label": "Installation",
-          "href": "#api-reference"
+          "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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/feature-grid"><small>Previous</small><strong>← Feature Grid</strong></a>
-      <a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</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"
+  size="compact"
-/&gt;</code></pre>
+  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"
+  size="spacious"
-/&gt;</code></pre>
+  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_stackOnMobile = (ctx.url.searchParams.get("pg_stackOnMobile") ?? "true") === "true"
-  state playground_fullWidthMobile = ctx.url.searchParams.get("pg_fullWidthMobile") ?? "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",
+    "label": "Browse components",
-    "key": "hero-actions-0-1",
+    "href": "#components",
-    "value": "primary",
+    "icon": "icon-[lucide--blocks]",
-    "label": "Primary workflow",
+    "variant": "primary"
-    "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": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
   },
   {
-    "id": "hero-actions-0-2",
+    "label": "View metrics",
-    "key": "hero-actions-0-2",
+    "href": "#metrics",
-    "value": "secondary",
+    "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-    "label": "Additional option",
+    "variant": "outline"
-    "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",
+      "label": "Browse components",
-      "key": "hero-actions-0-1",
+      "href": "#components",
-      "value": "primary",
+      "icon": "icon-[lucide--blocks]",
-      "label": "Primary workflow",
+      "variant": "primary"
-      "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"
-        &#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",
+      "label": "View metrics",
-      "key": "hero-actions-0-2",
+      "href": "#metrics",
-      "value": "secondary",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-      "label": "Additional option",
+      "variant": "outline"
-      "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"
-      ]
     &#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",
+      "label": "Browse components",
-      "key": "hero-actions-1-1",
+      "href": "#components",
-      "value": "primary",
+      "icon": "icon-[lucide--blocks]",
-      "label": "Secondary workflow",
+      "variant": "primary"
-      "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"
-        &#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",
+      "label": "View metrics",
-      "key": "hero-actions-1-2",
+      "href": "#metrics",
-      "value": "secondary",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-      "label": "Additional option",
+      "variant": "outline"
-      "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"
-      ]
     &#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",
+      "label": "Browse components",
-      "key": "hero-actions-2-1",
+      "href": "#components",
-      "value": "primary",
+      "icon": "icon-[lucide--blocks]",
-      "label": "Advanced workflow",
+      "variant": "primary"
-      "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"
-        &#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": "hero-actions-2-2",
+      "label": "View metrics",
-      "key": "hero-actions-2-2",
+      "href": "#metrics",
-      "value": "secondary",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
-      "label": "Additional option",
+      "variant": "outline"
-      "title": "Supporting example",
+    &#125;,
-      "description": "A richer configuration with more supporting information and actions.",
+    &#123;
-      "text": "Another configurable message.",
+      "label": "Contact support",
-      "href": "#hero-actions-demo",
+      "href": "#support",
-      "actionHref": "#hero-actions-demo",
+      "icon": "icon-[lucide--life-buoy]",
-      "actionLabel": "Explore workflow",
+      "variant": "ghost"
-      "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;
   ]'
   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/hero"><small>Previous</small><strong>← Hero</strong></a>
-      <a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
+      <a href="/components/marketing-section-header"><small>Next</small><strong>Marketing Section Header →</strong></a>
     </nav>
   }
 }

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

@@ -2,6 +2,8 @@
 page HeroDetail {
   layout = "showcase"
   state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
+  state playground_eyebrowIcon = ctx.url.searchParams.get("pg_eyebrowIcon") ?? ""
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Hero example"
   state playground_highlight = ctx.url.searchParams.get("pg_highlight") ?? ""
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default hero for a modern application."
@@ -9,47 +11,178 @@ page HeroDetail {
   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_layout = ctx.url.searchParams.get("pg_layout") ?? "split"
+  state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right"
+  state playground_visualStyle = ctx.url.searchParams.get("pg_visualStyle") ?? "plain"
+  state playground_showDecorations = (ctx.url.searchParams.get("pg_showDecorations") ?? "true") === "true"
+  state playground_fullBleed = (ctx.url.searchParams.get("pg_fullBleed") ?? "true") === "true"
+  state playground_visualEyebrow = ctx.url.searchParams.get("pg_visualEyebrow") ?? ""
+  state playground_visualTitle = ctx.url.searchParams.get("pg_visualTitle") ?? "Hero example"
+  state playground_visualDescription = ctx.url.searchParams.get("pg_visualDescription") ?? "A polished default hero for a modern application."
+  state playground_visualIcon = ctx.url.searchParams.get("pg_visualIcon") ?? ""
+  state playground_visualImage = ctx.url.searchParams.get("pg_visualImage") ?? ""
+  state playground_visualAlt = ctx.url.searchParams.get("pg_visualAlt") ?? ""
+  state playground_visualItems = JSON.parse(ctx.url.searchParams.get("pg_visualItems") ?? "[{\"id\":\"hero-0-1\",\"key\":\"hero-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#hero-demo\",\"actionHref\":\"#hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"hero-0-2\",\"key\":\"hero-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#hero-demo\",\"actionHref\":\"#hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Hero"
   state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#hero-demo"
   state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
+  state playground_primaryTarget = ctx.url.searchParams.get("pg_primaryTarget") ?? ""
   state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "Hero"
   state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#hero-demo"
   state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
+  state playground_secondaryTarget = ctx.url.searchParams.get("pg_secondaryTarget") ?? ""
   state playground_tertiaryLabel = ctx.url.searchParams.get("pg_tertiaryLabel") ?? "Hero"
   state playground_tertiaryHref = ctx.url.searchParams.get("pg_tertiaryHref") ?? "#hero-demo"
-  state playground_badges = ctx.url.searchParams.get("pg_badges") ?? "[\n  {\n    \"id\": \"hero-0-1\",\n    \"key\": \"hero-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-demo\",\n    \"actionHref\": \"#hero-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-0-2\",\n    \"key\": \"hero-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-demo\",\n    \"actionHref\": \"#hero-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_tertiaryIcon = ctx.url.searchParams.get("pg_tertiaryIcon") ?? ""
-  state playground_trustItems = ctx.url.searchParams.get("pg_trustItems") ?? "[\n  {\n    \"id\": \"hero-0-1\",\n    \"key\": \"hero-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-demo\",\n    \"actionHref\": \"#hero-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-0-2\",\n    \"key\": \"hero-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-demo\",\n    \"actionHref\": \"#hero-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_tertiaryTarget = ctx.url.searchParams.get("pg_tertiaryTarget") ?? ""
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
+  state playground_badges = JSON.parse(ctx.url.searchParams.get("pg_badges") ?? "[{\"id\":\"hero-0-1\",\"key\":\"hero-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#hero-demo\",\"actionHref\":\"#hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"hero-0-2\",\"key\":\"hero-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#hero-demo\",\"actionHref\":\"#hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_trustItems = JSON.parse(ctx.url.searchParams.get("pg_trustItems") ?? "[{\"id\":\"hero-0-1\",\"key\":\"hero-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#hero-demo\",\"actionHref\":\"#hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"hero-0-2\",\"key\":\"hero-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#hero-demo\",\"actionHref\":\"#hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "wide"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Hero"
-    description = "Reusable public-page hero with actions, trust items, badges, and visual slots."
+    description = "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel."
   }
   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>Hero</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Hero</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>Hero</h1>
-        <p>Reusable public-page hero with actions, trust items, badges, and visual slots.</p>
+        <p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p>
-        <div class="detail-badges"><span>20 props</span><span>6 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>38 props</span><span>6 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="Hero" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Hero" 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</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="Hero" eyebrow="{playground_eyebrow}" title="{playground_title}" highlight="{playground_highlight}" description="{playground_description}" align="{playground_align}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" primaryLabel="{playground_primaryLabel}" primaryHref="{playground_primaryHref}" primaryIcon="{playground_primaryIcon}" secondaryLabel="{playground_secondaryLabel}" secondaryHref="{playground_secondaryHref}" secondaryIcon="{playground_secondaryIcon}" tertiaryLabel="{playground_tertiaryLabel}" tertiaryHref="{playground_tertiaryHref}" badges="{playground_badges}" trustItems="{playground_trustItems}" maxWidth="{playground_maxWidth}" class="{playground_class}"><div slot="eyebrow" class="showcase-slot">eyebrow slot</div><div slot="actions" class="showcase-slot">actions slot</div><div slot="trust" class="showcase-slot">trust slot</div><div slot="visual" class="showcase-slot">visual slot</div><div slot="footer" class="showcase-slot">footer slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><Hero eyebrow='{playground_eyebrow}' eyebrowIcon='{playground_eyebrowIcon}' icon='{playground_icon}' title='{playground_title}' highlight='{playground_highlight}' description='{playground_description}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' layout='{playground_layout}' visualPosition='{playground_visualPosition}' visualStyle='{playground_visualStyle}' showDecorations='{playground_showDecorations}' fullBleed='{playground_fullBleed}' visualEyebrow='{playground_visualEyebrow}' visualTitle='{playground_visualTitle}' visualDescription='{playground_visualDescription}' visualIcon='{playground_visualIcon}' visualImage='{playground_visualImage}' visualAlt='{playground_visualAlt}' visualItems='{playground_visualItems}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' primaryTarget='{playground_primaryTarget}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' secondaryTarget='{playground_secondaryTarget}' tertiaryLabel='{playground_tertiaryLabel}' tertiaryHref='{playground_tertiaryHref}' tertiaryIcon='{playground_tertiaryIcon}' tertiaryTarget='{playground_tertiaryTarget}' badges='{playground_badges}' trustItems='{playground_trustItems}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></Hero></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;Hero
   title="Hero example"
   description="A polished default hero for a modern application."
   align="start"
+  visualTitle="Hero example"
+  visualDescription="A polished default hero for a modern application."
+  visualItems='[
+    &#123;
+      "id": "hero-0-1",
+      "key": "hero-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#hero-demo",
+      "actionHref": "#hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "id": "hero-0-2",
+      "key": "hero-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#hero-demo",
+      "actionHref": "#hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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;
+  ]'
   primaryLabel="Hero"
   primaryHref="#hero-demo"
   secondaryLabel="Hero"
@@ -272,14 +405,136 @@ page HeroDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add eyebrow, actions, trust, default, visual, footer slot content here --&gt;
+  &lt;div data-slot="eyebrow"&gt;
+    &lt;div class="showcase-slot"&gt;eyebrow slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="trust"&gt;
+    &lt;div class="showcase-slot"&gt;trust slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="visual"&gt;
+    &lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Hero&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>20 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>38 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-hero-title" name="pg_title" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-hero-description" name="pg_description" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option><option value="right">right</option></select></label><label class="playground-field" for="playground-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-size" name="pg_size"><option value="default" selected>default</option><option value="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="large">large</option></select></label><label class="playground-field" for="playground-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="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="solid">solid</option><option value="soft">soft</option><option value="gradient">gradient</option></select></label><label class="playground-field" for="playground-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-hero-primaryHref" name="pg_primaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryLabel"><span><strong>tertiary Label</strong><small>string</small></span><input id="playground-hero-tertiaryLabel" name="pg_tertiaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-tertiaryHref"><span><strong>tertiary Href</strong><small>string</small></span><input id="playground-hero-tertiaryHref" name="pg_tertiaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-badges"><span><strong>badges</strong><small>string</small></span><textarea id="playground-hero-badges" name="pg_badges" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-hero-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-hero-title" name="pg_title" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-hero-description" name="pg_description" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-hero-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-hero-layout" name="pg_layout"><option value="split" selected>split</option><option value="stacked">stacked</option><option value="content">content</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><select id="playground-hero-visualStyle" name="pg_visualStyle"><option value="plain" selected>plain</option><option value="card">card</option><option value="soft">soft</option></select></label><label class="playground-toggle" for="playground-hero-showDecorations"><span><strong>show Decorations</strong><small>boolean</small></span><input id="playground-hero-showDecorations" name="pg_showDecorations" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-hero-fullBleed" name="pg_fullBleed" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-hero-vLine truncated
+  {
+    "id": "hero-0-1",
+    "key": "hero-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#hero-demo",
+    "actionHref": "#hero-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  },
+  {
+    "id": "hero-0-2",
+    "key": "hero-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#hero-demo",
+    "actionHref": "#hero-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-hero-primaryHref" name="pg_primaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-primaryTarget"><span><strong>primary Target</strong><small>string</small></span><input id="playground-hero-primaryTarget" name="pg_primaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryTarget"><span><strong>secondary Target</strong><small>string</small></span><input id="playground-hero-secondaryTarget" name="pg_secondaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryLabel"><span><strong>tertiary Label</strong><small>string</small></span><input id="playground-hero-tertiaryLabel" name="pg_tertiaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-tertiaryHref"><span><strong>tertiary Href</strong><small>string</small></span><input id="playground-hero-tertiaryHref" name="pg_tertiaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-tertiaryIcon"><span><strong>tertiary Icon</strong><small>string</small></span><input id="playground-hero-tertiaryIcon" name="pg_tertiaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryTarget"><span><strong>tertiary Target</strong><small>string</small></span><input id="playground-hero-tertiaryTarget" name="pg_tertiaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-badges"><span><strong>badges</strong><small>string</small></span><textarea id="playground-hero-badges" name="pg_badges" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "hero-0-1",
     "key": "hero-0-1",
@@ -493,7 +748,7 @@ page HeroDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-hero-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-hero-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-hero-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-hero-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -502,24 +757,147 @@ page HeroDetail {
         <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 hero with visual</h2><p>Lead a landing page with clear content and a flexible visual slot.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="hero-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="Hero" title="Hero example" description="A polished default hero for a modern application." align="start" size="default" variant="default" primaryLabel="Hero" primaryHref="#hero-demo" secondaryLabel="Hero" secondaryHref="#hero-demo" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges="[{&quot;id&quot;:&quot;hero-0-1&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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-0-2&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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;]}]" trustItems="[{&quot;id&quot;:&quot;hero-0-1&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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-Line truncated
+            
+            <div class="demo-render"><Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","vaLine truncated
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></Hero></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Split hero with visual 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;Hero
-  title="Hero example"
+  eyebrow="Reusable public UI"
-  description="A polished default hero for a modern application."
+  eyebrowIcon="icon-[lucide--sparkles]"
+  title="Build polished pages"
+  highlight="with consistent hero layouts"
+  description="Create strong first impressions for public portals, product pages, and service overviews."
   align="start"
-  primaryLabel="Hero"
+  variant="gradient"
-  primaryHref="#hero-demo"
+  visualStyle="card"
-  secondaryLabel="Hero"
+  visualTitle="Hero example"
-  secondaryHref="#hero-demo"
+  visualDescription="A polished default hero for a modern application."
+  visualItems='[
+    &#123;
+      "id": "hero-0-1",
+      "key": "hero-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#hero-demo",
+      "actionHref": "#hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "id": "hero-0-2",
+      "key": "hero-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#hero-demo",
+      "actionHref": "#hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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;
+  ]'
+  primaryLabel="Explore components"
+  primaryHref="#components"
+  primaryIcon="icon-[lucide--arrow-right]"
+  secondaryLabel="Read documentation"
+  secondaryHref="#docs"
+  secondaryIcon="icon-[lucide--book-open]"
   tertiaryLabel="Hero"
   tertiaryHref="#hero-demo"
   badges='[
@@ -737,32 +1115,164 @@ page HeroDetail {
         "Standard"
       ]
     &#125;
-  ]'&gt;
+  ]'
-  &lt;!-- Add eyebrow, actions, trust, default, visual, footer slot content here --&gt;
+  maxWidth="wide"&gt;
+  &lt;div data-slot="eyebrow"&gt;
+    &lt;div class="showcase-slot"&gt;eyebrow slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="trust"&gt;
+    &lt;div class="showcase-slot"&gt;trust slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="visual"&gt;
+    &lt;div class="showcase-visual-panel"&gt;
+      &lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
+      &lt;strong&gt;Composable visual panel&lt;/strong&gt;
+      &lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Hero&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 hero</h2><p>Use a stacked, centered layout for announcements, campaigns, and simple conversion pages.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="hero-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="Hero" title="Compact Hero" description="A compact configuration for dashboards and dense product surfaces." align="center" size="sm" variant="secondary" primaryLabel="Compact example" primaryHref="#hero-demo" secondaryLabel="Compact example" secondaryHref="#hero-demo" tertiaryLabel="Compact example" tertiaryHref="#hero-demo" badges="[{&quot;id&quot;:&quot;hero-1-1&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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-1-2&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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;]}]" trustItems="[{&quot;id&quot;:&quot;hero-1-1&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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;StaLine truncated
+            
+            <div class="demo-render"><Hero eyebrow="Public campaign" icon="icon-[lucide--arrow-right]" title="Safer communities start with trusted information" description="Find verified guidance, public notices, and citizen services in one place." align="center" size="default" variant="soft" layout="stacked" showDecorations="true" fullBleed="true" visualTitle="Compact Hero" visualDescription="A compact configuration for dashboards and dense product surfaces." visualItems='[{"id":"hero-1-1","key":"hero-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-demo","actionHref":"#hero-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":"hero-1-2","key":"hero-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-demo","actionHref":"#hero-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"]}]' primaryLabel="Browse services" primaryHref="#services" secondaryLabel="Compact example" secondaryHref="#hero-demo" tertiaryLabel="Compact example" tertiaryHref="#hero-demo" badges='[{"id":"hero-1-1","key":"hero-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-demo","actionHref":"#hero-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":"hero-1-2","key":"hero-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-demo","actionHref":"#hero-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"]}]' trustItems='[{"id":"hero-1-1","key":"hero-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-demo","actionHref":"#hero-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":Line truncated
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Centered campaign hero 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;Hero
-  title="Compact Hero"
+  eyebrow="Public campaign"
-  description="A compact configuration for dashboards and dense product surfaces."
+  icon="icon-[lucide--arrow-right]"
+  title="Safer communities start with trusted information"
+  description="Find verified guidance, public notices, and citizen services in one place."
   align="center"
-  size="sm"
+  variant="soft"
-  variant="secondary"
+  layout="stacked"
-  primaryLabel="Compact example"
+  visualTitle="Compact Hero"
-  primaryHref="#hero-demo"
+  visualDescription="A compact configuration for dashboards and dense product surfaces."
+  visualItems='[
+    &#123;
+      "id": "hero-1-1",
+      "key": "hero-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-demo",
+      "actionHref": "#hero-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": "hero-1-2",
+      "key": "hero-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-demo",
+      "actionHref": "#hero-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;
+  ]'
+  primaryLabel="Browse services"
+  primaryHref="#services"
   secondaryLabel="Compact example"
   secondaryHref="#hero-demo"
   tertiaryLabel="Compact example"
@@ -983,36 +1493,57 @@ page HeroDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add eyebrow, actions, trust, default, visual, footer slot content here --&gt;
+  &lt;div data-slot="eyebrow"&gt;
+    &lt;div class="showcase-slot"&gt;eyebrow slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="trust"&gt;
+    &lt;div class="showcase-slot"&gt;trust slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="visual"&gt;
+    &lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Hero&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>Hero with badges and trust</h2><p>Add product proof, audience badges, and supporting trust information.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="hero-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="Hero" title="Advanced Hero" description="A richer configuration demonstrating additional content and hierarchy." align="end" size="lg" variant="success" primaryLabel="Advanced example" primaryHref="#hero-demo" secondaryLabel="Advanced example" secondaryHref="#hero-demo" tertiaryLabel="Advanced example" tertiaryHref="#hero-demo" badges="[{&quot;id&quot;:&quot;hero-2-1&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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-2-2&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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;]}]" trustItems="[{&quot;id&quot;:&quot;hero-2-1&quot;,&quot;key&quot;:&quot;hero-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-demo&quot;,&quot;actionHref&quot;:&quot;#hero-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;:&Line truncated
+            
+            <div class="demo-render"><Hero eyebrow="Developer platform" icon="icon-[lucide--trash-2]" title="Ship reliable interfaces faster" highlight="without duplicating design work" description="Reusable components, server rendering, themes, accessibility, and responsive behavior." align="end" size="lg" variant="raised" layout="split" visualPosition="left" visualStyle="soft" showDecorations="true" fullBleed="true" visualTitle="Advanced Hero" visualDescription="A richer configuration demonstrating additional content and hierarchy." visualItems='[{"id":"hero-2-1","key":"hero-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-demo","actionHref":"#hero-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":"hero-2-2","key":"hero-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-demo","actionHref":"#hero-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"]}]' primaryLabel="Advanced example" primaryHref="#hero-demo" secondaryLabel="Advanced example" secondaryHref="#hero-demo" tertiaryLabel="Advanced example" tertiaryHref="#hero-demo" badges='["SSR first","Theme aware","Accessible"]' trustItems='["108 UI components","Light and dark themes","Mobile ready"]' class="showcase-instance showcase-instance--3"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></Hero></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Hero with badges and trust 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;Hero
-  title="Advanced Hero"
+  eyebrow="Developer platform"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  icon="icon-[lucide--trash-2]"
+  title="Ship reliable interfaces faster"
+  highlight="without duplicating design work"
+  description="Reusable components, server rendering, themes, accessibility, and responsive behavior."
   align="end"
   size="lg"
-  variant="success"
+  variant="raised"
-  primaryLabel="Advanced example"
+  visualPosition="left"
-  primaryHref="#hero-demo"
+  visualStyle="soft"
-  secondaryLabel="Advanced example"
+  visualTitle="Advanced Hero"
-  secondaryHref="#hero-demo"
+  visualDescription="A richer configuration demonstrating additional content and hierarchy."
-  tertiaryLabel="Advanced example"
+  visualItems='[
-  tertiaryHref="#hero-demo"
-  badges='[
     &#123;
       "id": "hero-2-1",
       "key": "hero-2-1",
@@ -1120,129 +1651,55 @@ page HeroDetail {
       ]
     &#125;
   ]'
+  primaryLabel="Advanced example"
+  primaryHref="#hero-demo"
+  secondaryLabel="Advanced example"
+  secondaryHref="#hero-demo"
+  tertiaryLabel="Advanced example"
+  tertiaryHref="#hero-demo"
+  badges='[
+    "SSR first",
+    "Theme aware",
+    "Accessible"
+  ]'
   trustItems='[
-    &#123;
+    "108 UI components",
-      "id": "hero-2-1",
+    "Light and dark themes",
-      "key": "hero-2-1",
+    "Mobile ready"
-      "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-demo",
-      "actionHref": "#hero-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;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    &#125;,
-    &#123;
-      "id": "hero-2-2",
-      "key": "hero-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-demo",
-      "actionHref": "#hero-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;
   ]'&gt;
-  &lt;!-- Add eyebrow, actions, trust, default, visual, footer slot content here --&gt;
+  &lt;div data-slot="eyebrow"&gt;
+    &lt;div class="showcase-slot"&gt;eyebrow slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="trust"&gt;
+    &lt;div class="showcase-slot"&gt;trust slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="visual"&gt;
+    &lt;div class="showcase-visual-panel"&gt;
+      &lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
+      &lt;strong&gt;Composable visual panel&lt;/strong&gt;
+      &lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Hero&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>"Build something remarkable"</code></td><td>No</td></tr><tr><td><code>highlight</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</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>tertiaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badges</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>trustItems</code></td><td>string</td><td><code>[]</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>
+        <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>eyebrowIcon</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>title</code></td><td>string</td><td><code>"Build something remarkable"</code></td><td>No</td></tr><tr><td><code>highlight</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"split"</code></td><td>No</td></tr><tr><td><code>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>visualStyle</code></td><td>string</td><td><code>"plain"</code></td><td>No</td></tr><tr><td><code>showDecorations</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullBleed</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>visualEyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualItems</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>primaryTarget</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>secondaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badges</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>trustItems</code></td><td>string</td><td><code>[]</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="#hero-demo-1">Production default</a><a href="#hero-demo-2">Compact application</a><a href="#hero-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-demo-1">Split hero with visual</a><a href="#hero-demo-2">Centered campaign hero</a><a href="#hero-demo-3">Hero with badges and trust</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/feature-icon-card"><small>Previous</small><strong>← Feature Icon Card</strong></a>
-      <a href="/components/marketing-section-header"><small>Next</small><strong>Marketing Section Header →</strong></a>
+      <a href="/components/hero-actions"><small>Next</small><strong>Hero Actions →</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/input-group.wrn

@@ -3,27 +3,27 @@ page InputGroupDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "input-group-1"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "input-groupField"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Workspace"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input group"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
-  state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "https://"
+  state playground_startText = ctx.url.searchParams.get("pg_startText") ?? ""
-  state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ".app"
+  state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ""
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Check"
+  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Input Group"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
-  state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  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 = "Input Group"
     description = "Theme-aware, responsive input group component."
@@ -41,30 +41,27 @@ page InputGroupDetail {
       </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="InputGroup" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="InputGroup" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,submit,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Input 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="InputGroup" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" startText="{playground_startText}" endText="{playground_endText}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" actionLabel="{playground_actionLabel}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" variant="{playground_variant}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><InputGroup size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' startText='{playground_startText}' endText='{playground_endText}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' actionLabel='{playground_actionLabel}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' variant='{playground_variant}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;InputGroup
-  id="input-group-1"
+  label="Input Group"
-  name="input-groupField"
+  value="sample-1"
-  label="Workspace"
+  placeholder="Enter a sample value"
-  placeholder="Enter input group"
+  actionLabel="Input Group"
-  startText="https://"
-  endText=".app"
-  actionLabel="Check"
-  helperText="Helpful context for this field."
 /&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>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="input-group-1" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="input-groupField" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Workspace" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="Enter input group" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="https://" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value=".app" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="Check" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-Line truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Input Group" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="Input Group" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></span><inputLine truncated
         </form>
       </div>
     </section>
@@ -73,236 +70,112 @@ page InputGroupDetail {
         <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>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</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="input-group-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="InputGroup" size="default" color="primary" id="input-group-1" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="Check" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><InputGroup size="default" label="Input Group" hiddenLabel="false" value="sample-1" placeholder="Enter a sample value" icon="" actionLabel="Input Group" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default field 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;InputGroup
-  id="input-group-1"
+  label="Input Group"
-  name="input-groupField"
+  value="sample-1"
-  label="Workspace"
+  placeholder="Enter a sample value"
-  placeholder="Enter input group"
+  actionLabel="Input Group"
-  startText="https://"
-  endText=".app"
-  actionLabel="Check"
-  helperText="Helpful context for this field."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</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="input-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="InputGroup" size="default" color="primary" id="input-group-2" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="icon-[lucide--sparkles]" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="outlined" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><InputGroup size="sm" label="Compact example" hiddenLabel="false" value="sample-2" placeholder="Enter a sample value" icon="icon-[lucide--arrow-right]" actionLabel="Compact example" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Outlined with start icon 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;InputGroup
-  id="input-group-2"
+  size="sm"
-  name="input-groupField"
+  label="Compact example"
-  label="Workspace"
+  value="sample-2"
-  placeholder="Enter input group"
+  placeholder="Enter a sample value"
-  startText="https://"
+  icon="icon-[lucide--arrow-right]"
-  endText=".app"
+  actionLabel="Compact example"
-  icon="icon-[lucide--sparkles]"
+  variant="secondary"
-  variant="outlined"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</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="input-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="InputGroup" size="default" color="primary" id="input-group-3" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="icon-[lucide--circle-user-round]" iconPosition="end" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="floating" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><InputGroup size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" placeholder="Search by name, email, or identifier" icon="icon-[lucide--trash-2]" actionLabel="Advanced example" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Floating label 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;InputGroup
-  id="input-group-3"
+  size="lg"
-  name="input-groupField"
+  label="Advanced example"
-  label="Workspace"
+  value="sample-3"
-  placeholder="Enter input group"
+  placeholder="Search by name, email, or identifier"
-  startText="https://"
+  icon="icon-[lucide--trash-2]"
-  endText=".app"
+  actionLabel="Advanced example"
-  icon="icon-[lucide--circle-user-round]"
+  variant="success"
-  iconPosition="end"
-  variant="floating"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="input-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="InputGroup" size="sm" color="primary" id="input-group-4" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="pill" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Pill and compact size usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;InputGroup
-  size="sm"
-  id="input-group-4"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  variant="pill"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="input-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="InputGroup" size="default" color="primary" id="input-group-5" name="input-groupField" label="Workspace" value="wirejs" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="true" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Read only usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;InputGroup
-  id="input-group-5"
-  name="input-groupField"
-  label="Workspace"
-  value="wirejs"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  readonly="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="input-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="InputGroup" size="default" color="primary" id="input-group-6" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="true" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Disabled usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;InputGroup
-  id="input-group-6"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  disabled="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="input-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="InputGroup" size="default" color="primary" id="input-group-7" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" variant="normal" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Inline helper text usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;InputGroup
-  id="input-group-7"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  helperText="We'll never share your details."
-  inline="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="input-group-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="InputGroup" size="default" color="primary" id="input-group-8" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="Optional" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Field with corner hint usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;InputGroup
-  id="input-group-8"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  cornerHint="Optional"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="input-group-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="InputGroup" size="default" color="primary" id="input-group-9" name="validatedField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
-          </div>
-          <section class="demo-code" aria-label="Validated field usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;InputGroup
-  id="input-group-9"
-  name="validatedField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  required="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="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>@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><code>@submit</code><span>Fires when the component submits its value.</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>@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>@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><code>@submit</code><span>Fires when the component emits the submit event.</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;InputGroup
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+  @submit='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=\"InputGroup\"], [data-component=\"InputGroup\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", 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;)
+
+component?.addEventListener("submit", (event) =&gt; &#123;
+  console.log("submit", 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>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input group"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>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>startText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>endText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-group-demo-1">Default field</a><a href="#input-group-demo-2">Outlined with start icon</a><a href="#input-group-demo-3">Floating label</a><a href="#input-group-demo-4">Pill and compact size</a><a href="#input-group-demo-5">Read only</a><a href="#input-group-demo-6">Disabled</a><a href="#input-group-demo-7">Inline helper text</a><a href="#input-group-demo-8">Field with corner hint</a><a href="#input-group-demo-9">Validated field</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="#input-group-demo-1">Production default</a><a href="#input-group-demo-2">Compact application</a><a href="#input-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/input-number.wrn

@@ -7,34 +7,34 @@ page InputNumberDetail {
   state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
   state playground_name = ctx.url.searchParams.get("pg_name") ?? "default-quantity"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "1"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "1")
   state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
   state playground_max = ctx.url.searchParams.get("pg_max") ?? "99"
-  state playground_step = ctx.url.searchParams.get("pg_step") ?? "1"
+  state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
   state playground_precision = ctx.url.searchParams.get("pg_precision") ?? "auto"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? ""
   state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
   state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
   state playground_prefix = ctx.url.searchParams.get("pg_prefix") ?? ""
   state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
   state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
   state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "decimal"
   state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_inputDisabled = ctx.url.searchParams.get("pg_inputDisabled") ?? "false"
+  state playground_inputDisabled = (ctx.url.searchParams.get("pg_inputDisabled") ?? "false") === "true"
-  state playground_buttonsDisabled = ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false"
+  state playground_buttonsDisabled = (ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false") === "true"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_allowInput = ctx.url.searchParams.get("pg_allowInput") ?? "true"
+  state playground_allowInput = (ctx.url.searchParams.get("pg_allowInput") ?? "true") === "true"
-  state playground_keyboard = ctx.url.searchParams.get("pg_keyboard") ?? "true"
+  state playground_keyboard = (ctx.url.searchParams.get("pg_keyboard") ?? "true") === "true"
-  state playground_wheel = ctx.url.searchParams.get("pg_wheel") ?? "false"
+  state playground_wheel = (ctx.url.searchParams.get("pg_wheel") ?? "false") === "true"
-  state playground_clamp = ctx.url.searchParams.get("pg_clamp") ?? "true"
+  state playground_clamp = (ctx.url.searchParams.get("pg_clamp") ?? "true") === "true"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
+  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
-  state playground_showButtons = ctx.url.searchParams.get("pg_showButtons") ?? "true"
+  state playground_showButtons = (ctx.url.searchParams.get("pg_showButtons") ?? "true") === "true"
-  state playground_showValidationMessage = ctx.url.searchParams.get("pg_showValidationMessage") ?? "true"
+  state playground_showValidationMessage = (ctx.url.searchParams.get("pg_showValidationMessage") ?? "true") === "true"
   state playground_decrementLabel = ctx.url.searchParams.get("pg_decrementLabel") ?? "Decrease value"
   state playground_incrementLabel = ctx.url.searchParams.get("pg_incrementLabel") ?? "Increase value"
   state playground_controlsLabel = ctx.url.searchParams.get("pg_controlsLabel") ?? "Quantity controls"
@@ -58,12 +58,12 @@ page InputNumberDetail {
       </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="InputNumber" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="InputNumber" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,increment,decrement">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Input Number</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="InputNumber" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" id="{playground_id}" name="{playground_name}" value="{playground_value}" min="{playground_min}" max="{playground_max}" step="{playground_step}" precision="{playground_precision}" label="{playground_label}" description="{playground_description}" helpText="{playground_helpText}" error="{playground_error}" invalid="{playground_invalid}" prefix="{playground_prefix}" suffix="{playground_suffix}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" inputMode="{playground_inputMode}" ariaLabel="{playground_ariaLabel}" required="{playground_required}" disabled="{playground_disabled}" inputDisabled="{playground_inputDisabled}" buttonsDisabled="{playground_buttonsDisabled}" readonly="{playground_readonly}" allowInput="{playground_allowInput}" keyboard="{playground_keyboard}" wheel="{playground_wheel}" clamp="{playground_clamp}" fullWidth="{playground_fullWidth}" showButtons="{playground_showButtons}" showValidationMessage="{playground_showValidationMessage}" decrementLabel="{playground_decrementLabel}" incrementLabel="{playground_incrementLabel}" controlsLabel="{playground_controlsLabel}" requiredMessage="{playground_requiredMessage}" minMessage="{playground_minMessage}" maxMessage="{playground_maxMessage}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><InputNumber size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' id='{playground_id}' name='{playground_name}' value='{playground_value}' min='{playground_min}' max='{playground_max}' step='{playground_step}' precision='{playground_precision}' label='{playground_label}' description='{playground_description}' helpText='{playground_helpText}' error='{playground_error}' invalid='{playground_invalid}' prefix='{playground_prefix}' suffix='{playground_suffix}' placeholder='{playground_placeholder}' autocomplete='{playground_autocomplete}' inputMode='{playground_inputMode}' ariaLabel='{playground_ariaLabel}' required='{playground_required}' disabled='{playground_disabled}' inputDisabled='{playground_inputDisabled}' buttonsDisabled='{playground_buttonsDisabled}' readonly='{playground_readonly}' allowInput='{playground_allowInput}' keyboard='{playground_keyboard}' wheel='{playground_wheel}' clamp='{playground_clamp}' fullWidth='{playground_fullWidth}' showButtons='{playground_showButtons}' showValidationMessage='{playground_showValidationMessage}' decrementLabel='{playground_decrementLabel}' incrementLabel='{playground_incrementLabel}' controlsLabel='{playground_controlsLabel}' requiredMessage='{playground_requiredMessage}' minMessage='{playground_minMessage}' maxMessage='{playground_maxMessage}' /></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;InputNumber
@@ -75,10 +75,11 @@ page InputNumberDetail {
 /&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>40 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-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-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-number-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-input-number-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="compact">compact</option><option value="horizontal">horizontal</option><option value="labeled">labeled</option><option value="seat">seat</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-input-number-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-number-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>number</small></span><input id="playground-input-number-value" name="pg_value" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>number</small></span><input id="playground-input-number-step" name="pg_step" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-precision"><span><strong>precision</strong><small>string</small></span><input id="playground-input-number-precision" name="pg_precision" type="text" value="auto" /></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="" /></label><label class="playground-field" for="playground-input-number-description"><span><strong>description</strong><small>string</small></span><input id="playground-input-number-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-input-number-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-input-number-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-input-number-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-number-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-input-number-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-input-number-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-input-number-suffix" name="pg_suffix" type="text" valueLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-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-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-number-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-number-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-input-number-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-number-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>number</small></span><input id="playground-input-number-value" name="pg_value" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>number</small></span><input id="playground-input-number-step" name="pg_step" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-precision"><span><strong>precision</strong><small>string</small></span><input id="playground-input-number-precision" name="pg_precision" type="text" value="auto" /></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="" /></label><label class="playground-field" for="playground-input-number-description"><span><strong>description</strong><small>string</small></span><input id="playground-input-number-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-input-number-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-input-number-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-input-number-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-number-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-input-number-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-input-number-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-input-number-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-number-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-input-number-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-input-number-autocomplLine truncated
         </form>
       </div>
     </section>
@@ -93,7 +94,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
           </div>
           <section class="demo-code" aria-label="Default controls usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -115,7 +117,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div>
           </div>
           <section class="demo-code" aria-label="Labeled input style usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -139,7 +142,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div>
           </div>
           <section class="demo-code" aria-label="Vertical buttons usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -163,7 +167,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div>
           </div>
           <section class="demo-code" aria-label="Horizontal buttons usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -186,7 +191,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10"></div></div>
+            
+            <div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div>
           </div>
           <section class="demo-code" aria-label="Compact size usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -208,7 +214,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div>
           </div>
           <section class="demo-code" aria-label="Seat quantity selector usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -232,7 +239,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" name="disabled-input" value="10" inputDisabled="true"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled 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 +261,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled buttons usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -274,7 +283,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div>
           </div>
           <section class="demo-code" aria-label="Custom step size usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -296,7 +306,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" name="negative-values" value="-10" min="-100" max="100"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div>
           </div>
           <section class="demo-code" aria-label="Negative values usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -318,7 +329,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" name="maximum-limit" value="10" min="0" max="10"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div>
           </div>
           <section class="demo-code" aria-label="Maximum limit usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -340,7 +352,8 @@ page InputNumberDetail {
         <div class="demo-workbench">
           <div id="input-number-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="InputNumber" size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit"></div></div>
+            
+            <div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div>
           </div>
           <section class="demo-code" aria-label="Validation states usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -355,11 +368,28 @@ page InputNumberDetail {
           </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>@increment</code><span>Fires when the component emits the increment event.</span></div><div><code>@decrement</code><span>Fires when the component emits the decrement 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>@increment</code><span>Fires when the component emits the increment event.</span></div><div><code>@decrement</code><span>Fires when the component emits the decrement 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;InputNumber
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @increment='console.log(event.detail)'
+  @decrement='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=\"InputNumber\"], [data-component=\"InputNumber\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("increment", (event) =&gt; &#123;
+  console.log("increment", event.detail)
+&#125;)
+
+component?.addEventListener("decrement", (event) =&gt; &#123;
+  console.log("decrement", 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>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><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"quantity"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>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>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>precision</code></td><td>string</td><td><code>"auto"</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>description</code></td><td>string</td><td><code>""</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>error</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>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>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>"off"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"decimal"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>required</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>inputDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>buttonsDisabled</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>allowInput</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>keyboard</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>wheel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clamp</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showButtons</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValidationMessage</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>decrementLabel</code></td><td>string</td><td><code>"Decrease value"</code></td><td>No</td></tr><tr><td><code>incrementLabel</code></td><td>string</td><td><code>"Increase value"</code></td><td>No</td></tr><tr><td><code>controlsLabel</code></td><td>string</td><td><code>"Quantity controls"</code></td><td>No</td></tr><tr><td><code>requiredMessage</code></td><td>string</td><td><code>"A value is required."</code></td><td>No</td></tr><tr><td><code>minMessage</code></td><td>string</td><td><code>"Value is below the minimum."</code></td><td>No</td></tr><tr><td><code>maxMessage</code></td><td>string</td><td><code>"Value is above the maximum."</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">

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

@@ -3,24 +3,24 @@ page InputDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "input-1"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "inputField"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Email address"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
-  state playground_type = ctx.url.searchParams.get("pg_type") ?? "email"
+  state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
-  state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "email"
+  state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? ""
   state playground_inputmode = ctx.url.searchParams.get("pg_inputmode") ?? ""
   state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? ""
   state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? ""
@@ -28,7 +28,7 @@ page InputDetail {
   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_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Input"
     description = "Theme-aware, responsive input component."
@@ -46,29 +46,25 @@ page InputDetail {
       </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="Input" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Input" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,invalid,keydown,keyup">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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="Input" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" type="{playground_type}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" autocomplete="{playground_autocomplete}" inputmode="{playground_inputmode}" minlength="{playground_minlength}" maxlength="{playground_maxlength}" pattern="{playground_pattern}" min="{playground_min}" max="{playground_max}" step="{playground_step}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Input size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' type='{playground_type}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' autocomplete='{playground_autocomplete}' inputmode='{playground_inputmode}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' pattern='{playground_pattern}' min='{playground_min}' max='{playground_max}' step='{playground_step}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Input
-  id="input-1"
+  placeholder="Enter a sample value"
-  name="inputField"
+  value="sample-1"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  helperText="Helpful context for this field."
-  autocomplete="email"
 /&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>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="input-1" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="inputField" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Email address" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter input" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="email" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-input-variant" name="pg_variant"><option value="normal" selected>normal</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="floating">floating</option></select></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Input" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true">Line truncated
         </form>
       </div>
     </section>
@@ -77,235 +73,113 @@ page InputDetail {
         <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>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</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="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="Input" size="default" color="primary" id="input-1" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
+            
+            <div class="demo-render"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default field 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;Input
-  id="input-1"
+  placeholder="Enter a sample value"
-  name="inputField"
+  value="sample-1"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  helperText="Helpful context for this field."
-  autocomplete="email"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</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="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 data-component="Input" size="default" color="primary" id="input-2" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
+            
+            <div class="demo-render"><Input size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Outlined with start icon 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;Input
-  id="input-2"
+  size="sm"
-  name="inputField"
+  label="Compact example"
-  label="Email address"
+  placeholder="Enter a sample value"
-  placeholder="Enter input"
+  value="sample-2"
-  type="email"
+  variant="secondary"
-  variant="outlined"
+  icon="icon-[lucide--arrow-right]"
-  icon="icon-[lucide--sparkles]"
-  autocomplete="email"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</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="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="Input" size="default" color="primary" id="input-3" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
+            
+            <div class="demo-render"><Input size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Floating label 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;Input
-  id="input-3"
+  size="lg"
-  name="inputField"
+  label="Advanced example"
-  label="Email address"
+  placeholder="Search by name, email, or identifier"
-  placeholder="Enter input"
+  value="sample-3"
-  type="email"
+  variant="success"
-  variant="floating"
+  icon="icon-[lucide--trash-2]"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-  autocomplete="email"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="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="Input" size="sm" color="primary" id="input-4" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Pill and compact size 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;Input
-  size="sm"
-  id="input-4"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  variant="pill"
-  autocomplete="email"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="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="Input" size="default" color="primary" id="input-5" name="inputField" label="Email address" placeholder="Enter input" value="readonly@example.com" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false" autocomplete="email"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Read only 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;Input
-  id="input-5"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  value="readonly@example.com"
-  type="email"
-  readonly="true"
-  autocomplete="email"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="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="Input" size="default" color="primary" id="input-6" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false" autocomplete="email"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Disabled 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;Input
-  id="input-6"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  disabled="true"
-  autocomplete="email"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="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="Input" size="default" color="primary" id="input-7" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Inline helper text 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;Input
-  id="input-7"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  helperText="We'll never share your details."
-  inline="true"
-  autocomplete="email"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="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="Input" size="default" color="primary" id="input-8" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Field with corner hint 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;Input
-  id="input-8"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  cornerHint="Optional"
-  autocomplete="email"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Input" size="default" color="primary" id="input-9" name="validatedField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true" autocomplete="email"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
-          </div>
-          <section class="demo-code" aria-label="Validated field 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;Input
-  id="input-9"
-  name="validatedField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  required="true"
-  autocomplete="email"
 /&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>@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>@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><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div><div><code>@keydown</code><span>Fires when the component emits the keydown event.</span></div><div><code>@keyup</code><span>Fires when the component emits the keyup 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>@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><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div><div><code>@keydown</code><span>Fires when the component emits the keydown event.</span></div><div><code>@keyup</code><span>Fires when the component emits the keyup 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;Input
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+  @invalid='console.log(event.detail)'
+  @keydown='console.log(event.detail)'
+  @keyup='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=\"Input\"], [data-component=\"Input\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", 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;)
+
+component?.addEventListener("invalid", (event) =&gt; &#123;
+  console.log("invalid", event.detail)
+&#125;)
+
+component?.addEventListener("keydown", (event) =&gt; &#123;
+  console.log("keydown", event.detail)
+&#125;)
+
+component?.addEventListener("keyup", (event) =&gt; &#123;
+  console.log("keyup", 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>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inputmode</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-demo-1">Default field</a><a href="#input-demo-2">Outlined with start icon</a><a href="#input-demo-3">Floating label</a><a href="#input-demo-4">Pill and compact size</a><a href="#input-demo-5">Read only</a><a href="#input-demo-6">Disabled</a><a href="#input-demo-7">Inline helper text</a><a href="#input-demo-8">Field with corner hint</a><a href="#input-demo-9">Validated field</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="#input-demo-1">Production default</a><a href="#input-demo-2">Compact application</a><a href="#input-demo-3">Rich configuration</a><a href="#events">Events</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;
+component?.addEventListener("resizeStart", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("resizeStart", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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;
+component?.addEventListener("toggle", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("toggle", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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"
+  label="WRNexusJS documentation"
-  href="#link-demo"
+  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"
+  color="info"
-  href="#link-demo"
+  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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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"
+  title="Citizen resources"
-  description="A polished default list for a modern application."
+  description="Commonly requested public information."
   items='[
     &#123;
-      "id": "list-0-1",
+      "label": "Report crime",
-      "key": "list-0-1",
+      "href": "#report",
-      "value": "primary",
+      "icon": "icon-[lucide--shield-alert]"
-      "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"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
     &#125;,
     &#123;
-      "id": "list-0-2",
+      "label": "Track complaint",
-      "key": "list-0-2",
+      "href": "#track",
-      "value": "secondary",
+      "icon": "icon-[lucide--scan-search]"
-      "label": "Additional option",
+    &#125;,
-      "title": "Supporting example",
+    &#123;
-      "description": "A clean default configuration for everyday product interfaces.",
+      "label": "Certificates",
-      "text": "Another configurable message.",
+      "href": "#certificates",
-      "href": "#list-demo",
+      "icon": "icon-[lucide--file-check-2]"
-      "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"
-      ]
     &#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",
+      "label": "Application received",
-      "key": "list-1-1",
+      "status": "Complete"
-      "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"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
     &#125;,
     &#123;
-      "id": "list-1-2",
+      "label": "Verification",
-      "key": "list-1-2",
+      "status": "In progress"
-      "value": "secondary",
+    &#125;,
-      "label": "Additional option",
+    &#123;
-      "title": "Supporting example",
+      "label": "Decision",
-      "description": "A compact configuration designed for dense application layouts.",
+      "status": "Pending"
-      "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"
-      ]
     &#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"
+  title="Service requests"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  description="Recent requests and their current status."
   items='[
     &#123;
-      "id": "list-2-1",
+      "label": "Address verification",
-      "key": "list-2-1",
+      "description": "Submitted yesterday",
-      "value": "primary",
+      "status": "Review",
-      "label": "Advanced workflow",
+      "href": "#request-1"
-      "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"
-        &#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",
+      "label": "Character certificate",
-      "key": "list-2-2",
+      "description": "Submitted 3 days ago",
-      "value": "secondary",
+      "status": "Approved",
-      "label": "Additional option",
+      "href": "#request-2"
-      "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"
-      ]
     &#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"
+  title="Nearby police stations"
-  description="A polished default map for a modern application."
+  description="Select a station to view contact details and jurisdiction information."
   items='[
     &#123;
-      "id": "map-0-1",
+      "title": "Central station",
-      "key": "map-0-1",
+      "description": "Main Road",
-      "value": "primary",
+      "latitude": 18.5204,
-      "label": "Primary workflow",
+      "longitude": 73.8567
-      "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"
-        &#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",
+      "title": "North station",
-      "key": "map-0-2",
+      "description": "University Road",
-      "value": "secondary",
+      "latitude": 18.559,
-      "label": "Additional option",
+      "longitude": 73.807
-      "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"
-      ]
     &#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"
+  title="Service location"
-  description="A compact configuration for dashboards and dense product surfaces."
+  description="Public service office"
   items='[
     &#123;
-      "id": "map-1-1",
+      "title": "Public office",
-      "key": "map-1-1",
+      "description": "City centre"
-      "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"
-      ]
     &#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"
+  color="info"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  title="Jurisdiction overview"
+  description="Stations, service areas, and public facilities."
   items='[
     &#123;
-      "id": "map-2-1",
+      "title": "Station A"
-      "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"
-        &#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": "map-2-2",
+      "title": "Station B"
-      "key": "map-2-2",
+    &#125;,
-      "value": "secondary",
+    &#123;
-      "label": "Additional option",
+      "title": "Control room"
-      "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"
-      ]
     &#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"
+  eyebrow="Platform capabilities"
-  description="A polished default marketing section header for a modern application."
+  title="Build complete public experiences"
-  align="start"
+  description="Use reusable sections, cards, metrics, heroes, and CTAs."
-  actionLabel="Marketing Section Header"
+  actionLabel="Explore components"
-  actionHref="#marketing-section-header-demo"&gt;
+  actionHref="#components"
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  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"
+  eyebrow="Why WRNexusJS"
-  description="A compact configuration for dashboards and dense product surfaces."
+  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"
+  eyebrow="Developer resources"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  title="Learn the framework through working examples"
-  align="end"
+  description="Every component page includes live demos, playground controls, events, and API details."
-  size="lg"
+  size="large"
-  actionLabel="Advanced example"
+  actionLabel="Open documentation"
-  actionHref="#marketing-section-header-demo"&gt;
+  actionHref="https://wrnexusjs.dev"
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  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/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
-      <a href="/components/metric-card"><small>Next</small><strong>Metric Card →</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",
+      "label": "SSR"
-      "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"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
     &#125;,
     &#123;
-      "id": "marquee-0-2",
+      "label": "CSR"
-      "key": "marquee-0-2",
+    &#125;,
-      "value": "secondary",
+    &#123;
-      "label": "Additional option",
+      "label": "Themes"
-      "title": "Supporting example",
+    &#125;,
-      "description": "A clean default configuration for everyday product interfaces.",
+    &#123;
-      "text": "Another configurable message.",
+      "label": "Accessibility"
-      "href": "#marquee-demo",
+    &#125;,
-      "actionHref": "#marquee-demo",
+    &#123;
-      "actionLabel": "View details",
+      "label": "Responsive UI"
-      "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;
   ]'
 /&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",
+      "label": "All services operational"
-      "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"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
     &#125;,
     &#123;
-      "id": "marquee-1-2",
+      "label": "New components published"
-      "key": "marquee-1-2",
+    &#125;,
-      "value": "secondary",
+    &#123;
-      "label": "Additional option",
+      "label": "Documentation updated"
-      "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"
-      ]
     &#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",
+      "label": "Public portals",
-      "key": "marquee-2-1",
+      "icon": "icon-[lucide--landmark]"
-      "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"
-        &#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": "marquee-2-2",
+      "label": "Enterprise systems",
-      "key": "marquee-2-2",
+      "icon": "icon-[lucide--building-2]"
-      "value": "secondary",
+    &#125;,
-      "label": "Additional option",
+    &#123;
-      "title": "Supporting example",
+      "label": "Developer tools",
-      "description": "A richer configuration with more supporting information and actions.",
+      "icon": "icon-[lucide--code-2]"
-      "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"
-      ]
     &#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;
+component?.addEventListener("open", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("open", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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-card.wrn

@@ -5,41 +5,53 @@ page MetricCardDetail {
   state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default metric card for a modern application."
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  state playground_iconStyle = ctx.url.searchParams.get("pg_iconStyle") ?? "soft"
   state playground_prefix = ctx.url.searchParams.get("pg_prefix") ?? ""
   state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
+  state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
   state playground_trend = ctx.url.searchParams.get("pg_trend") ?? ""
   state playground_trendLabel = ctx.url.searchParams.get("pg_trendLabel") ?? "Metric Card"
   state playground_trendDirection = ctx.url.searchParams.get("pg_trendDirection") ?? "neutral"
+  state playground_progress = Number(ctx.url.searchParams.get("pg_progress") ?? "-1")
+  state playground_progressLabel = ctx.url.searchParams.get("pg_progressLabel") ?? "Metric Card"
   state playground_href = ctx.url.searchParams.get("pg_href") ?? "#metric-card-demo"
+  state playground_target = ctx.url.searchParams.get("pg_target") ?? ""
+  state playground_rel = ctx.url.searchParams.get("pg_rel") ?? ""
+  state playground_external = (ctx.url.searchParams.get("pg_external") ?? "false") === "true"
   state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Metric Card"
+  state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
+  state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
+  state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Metric Card"
-    description = "Single statistic or operational metric with icon, trend, and optional action."
+    description = "Display one operational metric with value, suffix, description, icon, trend, progress, and optional 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>Metric Card</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/data">Data</a><span aria-hidden="true">/</span><span>Metric Card</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Blocks component</span>
+        <span class="showcase-eyebrow">Data component</span>
         <h1>Metric Card</h1>
-        <p>Single statistic or operational metric with icon, trend, and optional action.</p>
+        <p>Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.</p>
-        <div class="detail-badges"><span>16 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>28 props</span><span>2 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="MetricCard" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MetricCard" 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 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="MetricCard" label="{playground_label}" value="{playground_value}" description="{playground_description}" icon="{playground_icon}" prefix="{playground_prefix}" suffix="{playground_suffix}" trend="{playground_trend}" trendLabel="{playground_trendLabel}" trendDirection="{playground_trendDirection}" href="{playground_href}" actionLabel="{playground_actionLabel}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" align="{playground_align}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><MetricCard label='{playground_label}' value='{playground_value}' description='{playground_description}' icon='{playground_icon}' iconStyle='{playground_iconStyle}' prefix='{playground_prefix}' suffix='{playground_suffix}' badge='{playground_badge}' trend='{playground_trend}' trendLabel='{playground_trendLabel}' trendDirection='{playground_trendDirection}' progress='{playground_progress}' progressLabel='{playground_progressLabel}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' actionLabel='{playground_actionLabel}' actionIcon='{playground_actionIcon}' showArrow='{playground_showArrow}' selectable='{playground_selectable}' disabled='{playground_disabled}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' hover='{playground_hover}' align='{playground_align}' 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;MetricCard
@@ -47,16 +59,21 @@ page MetricCardDetail {
   value="sample-1"
   description="A polished default metric card for a modern application."
   trendLabel="Metric Card"
+  progressLabel="Metric Card"
   href="#metric-card-demo"
   actionLabel="Metric Card"
-  align="start"
+  align="start"&gt;
-/&gt;</code></pre>
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/MetricCard&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>16 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>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="positive">positive</option><option value="down">down</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-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-metric-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-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-metric-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-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><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-metric-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-metric-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><option value="right">right</option></select></label><label class="playground-field" for="playground-metric-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-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-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated
         </form>
       </div>
     </section>
@@ -65,92 +82,130 @@ page MetricCardDetail {
         <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>Operational KPI</h2><p>Display one metric with a clear label, value, supporting description, and trend.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="metric-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="MetricCard" label="Metric Card" value="sample-1" description="A polished default metric card for a modern application." icon="" trendLabel="Metric Card" href="#metric-card-demo" actionLabel="Metric Card" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" 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="Operational KPI 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;MetricCard
-  label="Metric Card"
+  label="Availability"
-  value="sample-1"
+  value="99.9"
-  description="A polished default metric card for a modern application."
+  description="Target service availability."
-  trendLabel="Metric Card"
+  icon="icon-[lucide--activity]"
-  href="#metric-card-demo"
+  suffix="%"
-  actionLabel="Metric Card"
+  trend="Stable"
-  align="start"
+  trendLabel="30 days"
-/&gt;</code></pre>
+  trendDirection="positive"
+  progressLabel="Metric Card"
+  href="#status"
+  actionLabel="Open status"
+  color="success"
+  align="start"&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/MetricCard&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>Progress metric</h2><p>Add progress when a value is measured against a clear target.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="metric-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="MetricCard" label="Compact example" value="sample-2" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" trendLabel="Compact example" href="#metric-card-demo" actionLabel="Compact example" size="sm" variant="secondary" align="center" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><MetricCard label="Profile completion" value="72" description="Complete the remaining account and security steps." icon="icon-[lucide--circle-user-round]" suffix="%" trendLabel="Compact example" progress="72" progressLabel="Account setup" href="#metric-card-demo" external="false" actionLabel="Compact example" showArrow="true" selectable="false" disabled="false" size="sm" color="info" variant="soft" 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="Progress metric 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;MetricCard
-  label="Compact example"
+  label="Profile completion"
-  value="sample-2"
+  value="72"
-  description="A compact configuration for dashboards and dense product surfaces."
+  description="Complete the remaining account and security steps."
-  icon="icon-[lucide--arrow-right]"
+  icon="icon-[lucide--circle-user-round]"
+  suffix="%"
   trendLabel="Compact example"
+  progress="72"
+  progressLabel="Account setup"
   href="#metric-card-demo"
   actionLabel="Compact example"
   size="sm"
-  variant="secondary"
+  color="info"
-  align="center"
+  variant="soft"
-/&gt;</code></pre>
+  align="center"&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/MetricCard&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>Selectable dashboard metric</h2><p>Emit select and action events from interactive cards used in dashboards.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="metric-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="MetricCard" label="Advanced example" value="sample-3" description="A richer configuration demonstrating additional content and hierarchy." icon="icon-[lucide--trash-2]" trendLabel="Advanced example" href="#metric-card-demo" actionLabel="Advanced example" size="lg" variant="success" align="end" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><MetricCard label="Open complaints" value="38" description="Cases waiting for review or assignment." icon="icon-[lucide--inbox]" badge="Needs review" trendLabel="Advanced example" progress="-1" progressLabel="Advanced example" href="#queue" external="false" actionLabel="Review queue" showArrow="true" selectable="true" disabled="false" size="lg" color="warning" variant="raised" hover="glow" align="end" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Selectable dashboard metric 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;MetricCard
-  label="Advanced example"
+  label="Open complaints"
-  value="sample-3"
+  value="38"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  description="Cases waiting for review or assignment."
-  icon="icon-[lucide--trash-2]"
+  icon="icon-[lucide--inbox]"
+  badge="Needs review"
   trendLabel="Advanced example"
-  href="#metric-card-demo"
+  progressLabel="Advanced example"
-  actionLabel="Advanced example"
+  href="#queue"
+  actionLabel="Review queue"
+  selectable="true"
   size="lg"
-  variant="success"
+  color="warning"
-  align="end"
+  variant="raised"
-/&gt;</code></pre>
+  hover="glow"
+  align="end"&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/MetricCard&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="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;MetricCard
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>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>""</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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+  @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=\"MetricCard\"], [data-component=\"MetricCard\"]")
+
+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>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-card-demo-1">Production default</a><a href="#metric-card-demo-2">Compact application</a><a href="#metric-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="#metric-card-demo-1">Operational KPI</a><a href="#metric-card-demo-2">Progress metric</a><a href="#metric-card-demo-3">Selectable dashboard metric</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/marketing-section-header"><small>Previous</small><strong>← Marketing Section Header</strong></a>
+      <span></span>
-      <a href="/components/page-header"><small>Next</small><strong>Page Header →</strong></a>
+      <a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</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_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 = ctx.url.searchParams.get("pg_columns") ?? "4"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
-  state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
+  state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
-  state playground_mobileColumns = ctx.url.searchParams.get("pg_mobileColumns") ?? "1"
+  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_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
-  state playground_dividers = ctx.url.searchParams.get("pg_dividers") ?? "false"
+  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>
+        <p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</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>
+        <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",
+    "label": "Public services",
-    "key": "metric-grid-0-1",
+    "value": "24",
-    "value": "primary",
+    "description": "Citizen-facing services available online.",
-    "label": "Primary workflow",
+    "icon": "icon-[lucide--hand-heart]",
-    "title": "Primary workflow",
+    "trend": "+4",
-    "description": "A clean default configuration for everyday product interfaces.",
+    "trendLabel": "this release",
-    "text": "A configurable sample message.",
+    "trendDirection": "up",
-    "href": "#metric-grid-demo",
+    "color": "primary"
-    "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": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
   },
   {
-    "id": "metric-grid-0-2",
+    "label": "Police stations",
-    "key": "metric-grid-0-2",
+    "value": "126",
-    "value": "secondary",
+    "description": "Searchable station and jurisdiction entries.",
-    "label": "Additional option",
+    "icon": "icon-[lucide--landmark]",
-    "title": "Supporting example",
+    "trend": "Updated",
-    "description": "A clean default configuration for everyday product interfaces.",
+    "trendLabel": "today",
-    "text": "Another configurable message.",
+    "color": "info"
-    "href": "#metric-grid-demo",
+  },
-    "actionHref": "#metric-grid-demo",
+  {
-    "actionLabel": "View details",
+    "label": "Availability",
-    "icon": "icon-[lucide--sparkles]",
+    "value": "99.9",
-    "iconClass": "icon-[lucide--sparkles]",
+    "suffix": "%",
-    "variant": "primary",
+    "description": "Target service availability.",
-    "status": "Active",
+    "icon": "icon-[lucide--activity]",
-    "time": "09:30",
+    "trend": "Stable",
-    "current": false,
+    "trendLabel": "30 days",
-    "selected": false,
+    "trendDirection": "positive",
-    "checked": false,
+    "color": "success"
-    "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",
+      "label": "Public services",
-      "key": "metric-grid-0-1",
+      "value": "24",
-      "value": "primary",
+      "description": "Citizen-facing services available online.",
-      "label": "Primary workflow",
+      "icon": "icon-[lucide--hand-heart]",
-      "title": "Primary workflow",
+      "trend": "+4",
-      "description": "A clean default configuration for everyday product interfaces.",
+      "trendLabel": "this release",
-      "text": "A configurable sample message.",
+      "trendDirection": "up",
-      "href": "#metric-grid-demo",
+      "color": "primary"
-      "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"
-        &#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": "metric-grid-0-2",
+      "label": "Police stations",
-      "key": "metric-grid-0-2",
+      "value": "126",
-      "value": "secondary",
+      "description": "Searchable station and jurisdiction entries.",
-      "label": "Additional option",
+      "icon": "icon-[lucide--landmark]",
-      "title": "Supporting example",
+      "trend": "Updated",
-      "description": "A clean default configuration for everyday product interfaces.",
+      "trendLabel": "today",
-      "text": "Another configurable message.",
+      "color": "info"
-      "href": "#metric-grid-demo",
+    &#125;,
-      "actionHref": "#metric-grid-demo",
+    &#123;
-      "actionLabel": "View details",
+      "label": "Availability",
-      "icon": "icon-[lucide--sparkles]",
+      "value": "99.9",
-      "iconClass": "icon-[lucide--sparkles]",
+      "suffix": "%",
-      "variant": "primary",
+      "description": "Target service availability.",
-      "status": "Active",
+      "icon": "icon-[lucide--activity]",
-      "time": "09:30",
+      "trend": "Stable",
-      "current": false,
+      "trendLabel": "30 days",
-      "selected": false,
+      "trendDirection": "positive",
-      "checked": false,
+      "color": "success"
-      "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;
   ]'
+  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",
+      "label": "Public services",
-      "key": "metric-grid-1-1",
+      "value": "24",
-      "value": "primary",
+      "description": "Citizen-facing services available online.",
-      "label": "Secondary workflow",
+      "icon": "icon-[lucide--hand-heart]",
-      "title": "Secondary workflow",
+      "trend": "+4",
-      "description": "A compact configuration designed for dense application layouts.",
+      "trendLabel": "this release",
-      "text": "A configurable sample message.",
+      "trendDirection": "up",
-      "href": "#metric-grid-demo",
+      "color": "primary"
-      "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"
-        &#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": "metric-grid-1-2",
+      "label": "Police stations",
-      "key": "metric-grid-1-2",
+      "value": "126",
-      "value": "secondary",
+      "description": "Searchable station and jurisdiction entries.",
-      "label": "Additional option",
+      "icon": "icon-[lucide--landmark]",
-      "title": "Supporting example",
+      "trend": "Updated",
-      "description": "A compact configuration designed for dense application layouts.",
+      "trendLabel": "today",
-      "text": "Another configurable message.",
+      "color": "info"
-      "href": "#metric-grid-demo",
+    &#125;,
-      "actionHref": "#metric-grid-demo",
+    &#123;
-      "actionLabel": "View details",
+      "label": "Availability",
-      "icon": "icon-[lucide--zap]",
+      "value": "99.9",
-      "iconClass": "icon-[lucide--zap]",
+      "suffix": "%",
-      "variant": "secondary",
+      "description": "Target service availability.",
-      "status": "Active",
+      "icon": "icon-[lucide--activity]",
-      "time": "10:15",
+      "trend": "Stable",
-      "current": false,
+      "trendLabel": "30 days",
-      "selected": false,
+      "trendDirection": "positive",
-      "checked": false,
+      "color": "success"
-      "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;
   ]'
+  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",
+      "label": "Public services",
-      "key": "metric-grid-2-1",
+      "value": "24",
-      "value": "primary",
+      "description": "Citizen-facing services available online.",
-      "label": "Advanced workflow",
+      "icon": "icon-[lucide--hand-heart]",
-      "title": "Advanced workflow",
+      "trend": "+4",
-      "description": "A richer configuration with more supporting information and actions.",
+      "trendLabel": "this release",
-      "text": "A configurable sample message.",
+      "trendDirection": "up",
-      "href": "#metric-grid-demo",
+      "color": "primary"
-      "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"
-        &#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": "metric-grid-2-2",
+      "label": "Police stations",
-      "key": "metric-grid-2-2",
+      "value": "126",
-      "value": "secondary",
+      "description": "Searchable station and jurisdiction entries.",
-      "label": "Additional option",
+      "icon": "icon-[lucide--landmark]",
-      "title": "Supporting example",
+      "trend": "Updated",
-      "description": "A richer configuration with more supporting information and actions.",
+      "trendLabel": "today",
-      "text": "Another configurable message.",
+      "color": "info"
-      "href": "#metric-grid-demo",
+    &#125;,
-      "actionHref": "#metric-grid-demo",
+    &#123;
-      "actionLabel": "Explore workflow",
+      "label": "Availability",
-      "icon": "icon-[lucide--circle-check]",
+      "value": "99.9",
-      "iconClass": "icon-[lucide--circle-check]",
+      "suffix": "%",
-      "variant": "success",
+      "description": "Target service availability.",
-      "status": "Complete",
+      "icon": "icon-[lucide--activity]",
-      "time": "11:45",
+      "trend": "Stable",
-      "current": false,
+      "trendLabel": "30 days",
-      "selected": false,
+      "trendDirection": "positive",
-      "checked": false,
+      "color": "success"
-      "disabled": true,
+    &#125;,
-      "outgoing": true,
+    &#123;
-      "open": true,
+      "label": "Response time",
-      "number": 2,
+      "value": "1.8",
-      "count": 64,
+      "suffix": "s",
-      "percentage": 91,
+      "description": "Median API response",
-      "color": "#059669",
+      "icon": "icon-[lucide--timer]",
-      "target": "_self",
+      "color": "warning",
-      "ariaLabel": "Open advanced workflow 2",
+      "progress": 72,
-      "items": [
+      "progressLabel": "Target"
-        &#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"
+  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="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
-        <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>
+  @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/metric-card"><small>Previous</small><strong>← Metric Card</strong></a>
-      <a href="/components/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
+      <a href="/components/stats-bar"><small>Next</small><strong>Stats Bar →</strong></a>
     </nav>
   }
 }

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

@@ -1,17 +1,37 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ModalDetail {
   layout = "showcase"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Modal example"
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Modal playground"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default modal for a modern application."
-  state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Modal"
+  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
+  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "center"
+  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true"
   state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Modal"
+  state playground_closeOnBackdrop = (ctx.url.searchParams.get("pg_closeOnBackdrop") ?? "true") === "true"
+  state playground_closeOnEscape = (ctx.url.searchParams.get("pg_closeOnEscape") ?? "true") === "true"
+  state playground_closeOnCancel = (ctx.url.searchParams.get("pg_closeOnCancel") ?? "true") === "true"
+  state playground_closeOnConfirm = (ctx.url.searchParams.get("pg_closeOnConfirm") ?? "false") === "true"
+  state playground_showFooter = (ctx.url.searchParams.get("pg_showFooter") ?? "true") === "true"
+  state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "Modal"
+  state playground_cancelIcon = ctx.url.searchParams.get("pg_cancelIcon") ?? ""
+  state playground_confirmLabel = ctx.url.searchParams.get("pg_confirmLabel") ?? "Modal"
+  state playground_confirmIcon = ctx.url.searchParams.get("pg_confirmIcon") ?? ""
+  state playground_confirmDisabled = (ctx.url.searchParams.get("pg_confirmDisabled") ?? "false") === "true"
+  state playground_confirmLoading = (ctx.url.searchParams.get("pg_confirmLoading") ?? "false") === "true"
+  state playground_destructive = (ctx.url.searchParams.get("pg_destructive") ?? "false") === "true"
+  state playground_triggerLabel = ctx.url.searchParams.get("pg_triggerLabel") ?? "Open playground modal"
+  state playground_triggerIcon = ctx.url.searchParams.get("pg_triggerIcon") ?? ""
+  state playground_scrollable = (ctx.url.searchParams.get("pg_scrollable") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Modal"
-    description = "Theme-aware, responsive modal component."
+    description = "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,31 +41,44 @@ page ModalDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Modal</h1>
-        <p>Theme-aware, responsive modal component.</p>
+        <p>Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.</p>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>28 props</span><span>4 slots</span><span>4 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="Modal" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Modal" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="open,close,cancel,confirm">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Modal</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="Modal" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" open="{playground_open}" placement="{playground_placement}" closeLabel="{playground_closeLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Modal open='{playground_open}' defaultOpen='{playground_defaultOpen}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' label='{playground_label}' size='{playground_size}' placement='{playground_placement}' color='{playground_color}' variant='{playground_variant}' showClose='{playground_showClose}' closeLabel='{playground_closeLabel}' closeOnBackdrop='{playground_closeOnBackdrop}' closeOnEscape='{playground_closeOnEscape}' closeOnCancel='{playground_closeOnCancel}' closeOnConfirm='{playground_closeOnConfirm}' showFooter='{playground_showFooter}' cancelLabel='{playground_cancelLabel}' cancelIcon='{playground_cancelIcon}' confirmLabel='{playground_confirmLabel}' confirmIcon='{playground_confirmIcon}' confirmDisabled='{playground_confirmDisabled}' confirmLoading='{playground_confirmLoading}' destructive='{playground_destructive}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' scrollable='{playground_scrollable}' class='{playground_class}'><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Modal
   title="Modal example"
   description="A polished default modal for a modern application."
-  open="true"
+  label="Modal"
   closeLabel="Modal"
-/&gt;</code></pre>
+  cancelLabel="Modal"
+  confirmLabel="Modal"
+  triggerLabel="Modal"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Modal&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>
+          <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-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-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal example" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-modal-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-class"><span><strong>class</strong><small>string</small></span><input id="playground-modal-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-modal-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal playground" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-field" for="playground-modal-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-modal-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-modal-label"><span><strong>label</strong><small>string</small></span><input id="playground-modal-label" name="pg_label" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="xs">xs</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-modal-placement" name="pg_placement"><option value="center" selected>center</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-modal-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="outline">outline</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-modal-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-modal-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-toggle" for="playground-modal-closeOnBackdrop"><span><strong>close On Backdrop</strong><small>boolean</small></span><input id="playground-modal-closeOnBackdrop" name="pg_closeOnBackdrop" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-modal-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnCancel"><span><strong>close On Cancel</strong><small>boolean</small></span><input id="playground-modal-closeOnCancel" name="pg_closeOnCancel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label claLine truncated
         </form>
       </div>
     </section>
@@ -54,78 +87,145 @@ page ModalDetail {
         <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>Confirmation modal</h2><p>Focus the user on one clear decision with confirm and cancel actions.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="modal-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Modal" size="default" title="Modal example" description="A polished default modal for a modern application." open="true" closeLabel="Modal" class="showcase-instance showcase-instance--1"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Confirm service request" description="Review the information before continuing." icon="icon-[lucide--shield-check]" label="Modal" size="md" variant="default" showClose="true" closeLabel="Modal" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Go back" confirmLabel="Confirm request" confirmIcon="icon-[lucide--check]" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open modal" triggerIcon="icon-[lucide--square-stack]" scrollable="true" class="showcase-instance showcase-instance--1"><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Confirmation modal usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Modal
-  title="Modal example"
+  title="Confirm service request"
-  description="A polished default modal for a modern application."
+  description="Review the information before continuing."
-  open="true"
+  icon="icon-[lucide--shield-check]"
+  label="Modal"
   closeLabel="Modal"
-/&gt;</code></pre>
+  cancelLabel="Go back"
+  confirmLabel="Confirm request"
+  confirmIcon="icon-[lucide--check]"
+  triggerLabel="Open modal"
+  triggerIcon="icon-[lucide--square-stack]"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-overlay-content"&gt;&lt;p&gt;This request will be submitted for review.&lt;/p&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Modal&gt;</code></pre>
           </section>
         </div>
       </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>Destructive confirmation</h2><p>Use a danger treatment for irreversible operations.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="modal-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Modal" size="sm" title="Compact Modal" description="A compact configuration for dashboards and dense product surfaces." open="true" closeLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Delete this record?" description="This action cannot be undone." icon="icon-[lucide--arrow-right]" label="Compact example" size="sm" variant="outline" showClose="true" closeLabel="Compact example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Keep record" confirmLabel="Delete record" confirmDisabled="false" confirmLoading="false" destructive="true" triggerLabel="Delete record" scrollable="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Destructive confirmation usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Modal
+  title="Delete this record?"
+  description="This action cannot be undone."
+  icon="icon-[lucide--arrow-right]"
+  label="Compact example"
   size="sm"
-  title="Compact Modal"
+  variant="outline"
-  description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
   closeLabel="Compact example"
-/&gt;</code></pre>
+  cancelLabel="Keep record"
+  confirmLabel="Delete record"
+  destructive="true"
+  triggerLabel="Delete record"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Modal&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>Scrollable form modal</h2><p>Open a larger modal for focused forms while keeping actions visible.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="modal-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Modal" size="lg" title="Advanced Modal" description="A richer configuration demonstrating additional content and hierarchy." open="true" closeLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
+            <div class="demo-render"><Modal open="false" defaultOpen="false" title="Create service request" description="Complete the required information." icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="soft" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Advanced example" confirmLabel="Submit request" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open request form" triggerIcon="icon-[lucide--file-plus-2]" scrollable="true" class="showcase-instance showcase-instance--3"><div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div></Modal></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Scrollable form modal usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Modal
+  title="Create service request"
+  description="Complete the required information."
+  icon="icon-[lucide--trash-2]"
+  label="Advanced example"
   size="lg"
-  title="Advanced Modal"
+  variant="soft"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
   closeLabel="Advanced example"
-/&gt;</code></pre>
+  cancelLabel="Advanced example"
+  confirmLabel="Submit request"
+  triggerLabel="Open request form"
+  triggerIcon="icon-[lucide--file-plus-2]"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-overlay-content showcase-overlay-content--tall"&gt;&lt;label&gt;Request title&lt;input value="Sample request" /&gt;&lt;/label&gt;&lt;label&gt;Description&lt;textarea&gt;Supporting information&lt;/textarea&gt;&lt;/label&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Modal&gt;</code></pre>
           </section>
         </div>
       </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>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@confirm</code><span>Fires when the component emits the confirm 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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@cancel</code><span>Fires when the user cancels or dismisses the current workflow.</span></div><div><code>@confirm</code><span>Fires when the user confirms the current action.</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;Modal
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @cancel='console.log(event.detail)'
+  @confirm='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=\"Modal\"], [data-component=\"Modal\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
+component?.addEventListener("open", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("open", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
-        <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>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</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("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("cancel", (event) =&gt; &#123;
+  console.log("cancel", event.detail)
+&#125;)
+
+component?.addEventListener("confirm", (event) =&gt; &#123;
+  console.log("confirm", 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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Modal dialog"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close modal"</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnCancel</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnConfirm</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showFooter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel"</code></td><td>No</td></tr><tr><td><code>cancelIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmLabel</code></td><td>string</td><td><code>"Confirm"</code></td><td>No</td></tr><tr><td><code>confirmIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>confirmLoading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>destructive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Production default</a><a href="#modal-demo-2">Compact application</a><a href="#modal-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="#modal-demo-1">Confirmation modal</a><a href="#modal-demo-2">Destructive confirmation</a><a href="#modal-demo-3">Scrollable form modal</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">

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;
+component?.addEventListener("select", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("select", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/navbar.wrn

@@ -5,12 +5,12 @@ page NavbarDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Navbar"
   state playground_topbarLabel = ctx.url.searchParams.get("pg_topbarLabel") ?? "Navbar"
-  state playground_brand = ctx.url.searchParams.get("pg_brand") ?? "{\n  \"id\": \"navbar-0-1\",\n  \"key\": \"navbar-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\": \"#navbar-demo\",\n  \"actionHref\": \"#navbar-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}"
+  state playground_brand = JSON.parse(ctx.url.searchParams.get("pg_brand") ?? "{\"id\":\"navbar-0-1\",\"key\":\"navbar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}")
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"navbar-0-1\",\n    \"key\": \"navbar-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\": \"#navbar-demo\",\n    \"actionHref\": \"#navbar-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\": \"navbar-0-2\",\n    \"key\": \"navbar-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\": \"#navbar-demo\",\n    \"actionHref\": \"#navbar-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\":\"navbar-0-1\",\"key\":\"navbar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
-  state playground_actions = ctx.url.searchParams.get("pg_actions") ?? "[\n  {\n    \"id\": \"navbar-0-1\",\n    \"key\": \"navbar-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\": \"#navbar-demo\",\n    \"actionHref\": \"#navbar-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\": \"navbar-0-2\",\n    \"key\": \"navbar-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\": \"#navbar-demo\",\n    \"actionHref\": \"#navbar-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") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
-  state playground_sticky = ctx.url.searchParams.get("pg_sticky") ?? "false"
+  state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
-  state playground_openOnHover = ctx.url.searchParams.get("pg_openOnHover") ?? "false"
+  state playground_openOnHover = (ctx.url.searchParams.get("pg_openOnHover") ?? "false") === "true"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
   state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -31,12 +31,12 @@ page NavbarDetail {
       </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="Navbar" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Navbar" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,open,close,select,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Navbar</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="Navbar" size="{playground_size}" color="{playground_color}" label="{playground_label}" topbarLabel="{playground_topbarLabel}" brand="{playground_brand}" items="{playground_items}" actions="{playground_actions}" active="{playground_active}" sticky="{playground_sticky}" openOnHover="{playground_openOnHover}" maxWidth="{playground_maxWidth}" mobileLabel="{playground_mobileLabel}" class="{playground_class}"><div slot="topbar" class="showcase-slot">topbar slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Navbar
@@ -312,10 +312,16 @@ page NavbarDetail {
     &#125;
   ]'
   mobileLabel="Navbar"&gt;
-  &lt;!-- Add topbar, actions slot content here --&gt;
+  &lt;div data-slot="topbar"&gt;
+    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Navbar&gt;</code></pre>
           </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>
@@ -585,7 +591,7 @@ page NavbarDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-navbar-maxWidth" name="pg_maxWidth" type="text" value="full" /></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -600,7 +606,8 @@ page NavbarDetail {
         <div class="demo-workbench">
           <div id="navbar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Navbar" size="default" label="Navbar" topbarLabel="Navbar" brand="{&quot;id&quot;:&quot;navbar-0-1&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;]}" items="[{&quot;id&quot;:&quot;navbar-0-1&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;navbar-0-2&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;]}]" actions="[{&quot;id&quot;:&quot;navbar-0-1&quot;,&quot;key&quot;:&quot;navbar-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;desLine truncated
+            
+            <div class="demo-render"><Navbar size="default" label="Navbar" topbarLabel="Navbar" brand='{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}' items='[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -877,7 +884,12 @@ page NavbarDetail {
     &#125;
   ]'
   mobileLabel="Navbar"&gt;
-  &lt;!-- Add topbar, actions slot content here --&gt;
+  &lt;div data-slot="topbar"&gt;
+    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Navbar&gt;</code></pre>
           </section>
         </div>
@@ -890,7 +902,8 @@ page NavbarDetail {
         <div class="demo-workbench">
           <div id="navbar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Navbar" size="sm" label="Compact example" topbarLabel="Compact example" brand="{&quot;id&quot;:&quot;navbar-1-1&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;]}" items="[{&quot;id&quot;:&quot;navbar-1-1&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;navbar-1-2&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;]}]" actions="[{&quot;id&quot;:&quot;navbar-1-1&quot;,&quot;key&quot;:&quot;navbar-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;Line truncated
+            
+            <div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}' items='[{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-1-2","key":"navbar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-1-2","key":"navbar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1168,7 +1181,12 @@ page NavbarDetail {
     &#125;
   ]'
   mobileLabel="Compact example"&gt;
-  &lt;!-- Add topbar, actions slot content here --&gt;
+  &lt;div data-slot="topbar"&gt;
+    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Navbar&gt;</code></pre>
           </section>
         </div>
@@ -1181,7 +1199,8 @@ page NavbarDetail {
         <div class="demo-workbench">
           <div id="navbar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Navbar" size="lg" label="Advanced example" topbarLabel="Advanced example" brand="{&quot;id&quot;:&quot;navbar-2-1&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;]}" items="[{&quot;id&quot;:&quot;navbar-2-1&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;navbar-2-2&quot;,&quot;key&quot;:&quot;navbar-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;#navbar-demo&quot;,&quot;actionHref&quot;:&quot;#navbar-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;]}]" actions="[{&quot;id&quot;:&quot;navbar-2-1&quot;,&quot;key&quot;:&quot;navbar-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&Line truncated
+            
+            <div class="demo-render"><Navbar size="lg" label="Advanced example" topbarLabel="Advanced example" brand='{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}' items='[{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"navbar-2-2","key":"navbar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' actions='[{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"navbar-2-2","key":"navbar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' sticky="false" openOnHover="false" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1459,16 +1478,43 @@ page NavbarDetail {
     &#125;
   ]'
   mobileLabel="Advanced example"&gt;
-  &lt;!-- Add topbar, actions slot content here --&gt;
+  &lt;div data-slot="topbar"&gt;
+    &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Navbar&gt;</code></pre>
           </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>@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><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>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</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>@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;Navbar
+  @toggle='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @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=\"Navbar\"], [data-component=\"Navbar\"]")
 
-component.addEventListener('toggle', (event) =&gt; &#123;
+component?.addEventListener("toggle", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("toggle", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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("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>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>string</td><td><code>&#123;&#125;</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>actions</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>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </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_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
-  state playground_showBreadcrumbs = ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true"
+  state playground_showBreadcrumbs = (ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true") === "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_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>
+        <p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary 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>
+        <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>
+          <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-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>[
+          <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",
+    "label": "Home",
-    "key": "page-header-0-1",
+    "href": "/",
-    "value": "primary",
+    "icon": "icon-[lucide--house]"
-    "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": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
   },
   {
-    "id": "page-header-0-2",
+    "label": "Components",
-    "key": "page-header-0-2",
+    "href": "/base"
-    "value": "secondary",
+  },
-    "label": "Additional option",
+  {
-    "title": "Supporting example",
+    "label": "Page header",
-    "description": "A clean default configuration for everyday product interfaces.",
+    "current": true
-    "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"
+  eyebrow="Component showcase"
-  description="A polished default page header for a modern application."
+  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",
+      "label": "Home",
-      "key": "page-header-0-1",
+      "href": "/",
-      "value": "primary",
+      "icon": "icon-[lucide--house]"
-      "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"
-        &#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": "page-header-0-2",
+      "label": "Components",
-      "key": "page-header-0-2",
+      "href": "/base"
-      "value": "secondary",
+    &#125;,
-      "label": "Additional option",
+    &#123;
-      "title": "Supporting example",
+      "label": "Page header",
-      "description": "A clean default configuration for everyday product interfaces.",
+      "current": true
-      "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"
-      ]
     &#125;
   ]'
-  primaryLabel="Page Header"
+  breadcrumbParentHref="#page-header-demo"
-  primaryHref="#page-header-demo"
+  primaryLabel="Primary action"
-  secondaryLabel="Page Header"
+  primaryHref="#primary"
-  secondaryHref="#page-header-demo"&gt;
+  primaryIcon="icon-[lucide--arrow-down]"
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  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"
+  eyebrow="Citizen service"
-  description="A compact configuration for dashboards and dense product surfaces."
+  title="Track a complaint"
-  icon="icon-[lucide--arrow-right]"
+  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"
+  breadcrumbParentHref="#page-header-demo"
-  primaryHref="#page-header-demo"
+  primaryLabel="Track status"
+  primaryHref="#track"
   secondaryLabel="Compact example"
   secondaryHref="#page-header-demo"
-  variant="secondary"&gt;
+  variant="soft"&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>
       </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"
+  eyebrow="Safety guide"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  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;
+  variant="minimal"&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>
       </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/marketing-section-header"><small>Previous</small><strong>← Marketing Section Header</strong></a>
-      <a href="/components/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</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;
+component?.addEventListener("change", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("change", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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_masked = (ctx.url.searchParams.get("pg_masked") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  state playground_autoFocus = ctx.url.searchParams.get("pg_autoFocus") ?? "false"
+  state playground_autoFocus = (ctx.url.searchParams.get("pg_autoFocus") ?? "false") === "true"
-  state playground_autoSubmit = ctx.url.searchParams.get("pg_autoSubmit") ?? "false"
+  state playground_autoSubmit = (ctx.url.searchParams.get("pg_autoSubmit") ?? "false") === "true"
-  state playground_allowPaste = ctx.url.searchParams.get("pg_allowPaste") ?? "true"
+  state playground_allowPaste = (ctx.url.searchParams.get("pg_allowPaste") ?? "true") === "true"
-  state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "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;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/popover.wrn

@@ -1,17 +1,32 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page PopoverDetail {
   layout = "showcase"
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  state playground_triggerLabel = ctx.url.searchParams.get("pg_triggerLabel") ?? "Open playground popover"
+  state playground_triggerIcon = ctx.url.searchParams.get("pg_triggerIcon") ?? ""
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Popover playground"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default popover for a modern application."
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start"
+  state playground_width = ctx.url.searchParams.get("pg_width") ?? "md"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Popover example"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default popover for a modern application."
+  state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
-  state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
+  state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true"
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
   state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Popover"
+  state playground_closeOnOutside = (ctx.url.searchParams.get("pg_closeOnOutside") ?? "true") === "true"
+  state playground_closeOnEscape = (ctx.url.searchParams.get("pg_closeOnEscape") ?? "true") === "true"
+  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Popover"
+  state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#popover-demo"
+  state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
+  state playground_closeOnAction = (ctx.url.searchParams.get("pg_closeOnAction") ?? "true") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Popover"
-    description = "Theme-aware, responsive popover component."
+    description = "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,31 +36,44 @@ page PopoverDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Popover</h1>
-        <p>Theme-aware, responsive popover component.</p>
+        <p>Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.</p>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>23 props</span><span>4 slots</span><span>4 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="Popover" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Popover" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,open,close,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Popover</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="Popover" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" open="{playground_open}" placement="{playground_placement}" closeLabel="{playground_closeLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Popover open='{playground_open}' defaultOpen='{playground_defaultOpen}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' placement='{playground_placement}' width='{playground_width}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' showArrow='{playground_showArrow}' showClose='{playground_showClose}' closeLabel='{playground_closeLabel}' closeOnOutside='{playground_closeOnOutside}' closeOnEscape='{playground_closeOnEscape}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' closeOnAction='{playground_closeOnAction}' disabled='{playground_disabled}' class='{playground_class}'><p>Popover content remains attached to its trigger and becomes mobile-friendly on small screens.</p></Popover></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;Popover
+  triggerLabel="Popover"
   title="Popover example"
   description="A polished default popover for a modern application."
-  open="true"
+  showClose="true"
   closeLabel="Popover"
-/&gt;</code></pre>
+  actionLabel="Popover"
+  actionHref="#popover-demo"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Popover&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>
+          <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-popover-size"><span><strong>size</strong><small>string</small></span><select id="playground-popover-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-popover-color"><span><strong>color</strong><small>string</small></span><select id="playground-popover-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-popover-title"><span><strong>title</strong><small>string</small></span><input id="playground-popover-title" name="pg_title" type="text" value="Popover example" /></label><label class="playground-field" for="playground-popover-description"><span><strong>description</strong><small>string</small></span><input id="playground-popover-description" name="pg_description" type="text" value="A polished default popover for a modern application." /></label><label class="playground-toggle" for="playground-popover-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-popover-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-popover-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-popover-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-popover-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-popover-closeLabel" name="pg_closeLabel" type="text" value="Popover" /></label><label class="playground-field" for="playground-popover-class"><span><strong>class</strong><small>string</small></span><input id="playground-popover-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-toggle" for="playground-popover-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-popover-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-popover-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-popover-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-popover-triggerLabel"><span><strong>trigger Label</strong><small>string</small></span><input id="playground-popover-triggerLabel" name="pg_triggerLabel" type="text" value="Open playground popover" /></label><label class="playground-field" for="playground-popover-triggerIcon"><span><strong>trigger Icon</strong><small>string</small></span><input id="playground-popover-triggerIcon" name="pg_triggerIcon" type="text" value="" /></label><label class="playground-field" for="playground-popover-title"><span><strong>title</strong><small>string</small></span><input id="playground-popover-title" name="pg_title" type="text" value="Popover playground" /></label><label class="playground-field" for="playground-popover-description"><span><strong>description</strong><small>string</small></span><input id="playground-popover-description" name="pg_description" type="text" value="A polished default popover for a modern application." /></label><label class="playground-field" for="playground-popover-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-popover-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-popover-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-popover-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom">bottom</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-popover-width"><span><strong>width</strong><small>string</small></span><select id="playground-popover-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="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-popover-size"><span><strong>size</strong><small>string</small></span><select id="playground-popover-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-popover-color"><span><strong>color</strong><small>string</small></span><select id="playground-popover-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-popover-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-popover-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-popover-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-popover-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-popover-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-popover-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-popover-closeLabel"><span><strong>close Label</strong><small>string</small></span><input iLine truncated
         </form>
       </div>
     </section>
@@ -54,78 +82,148 @@ page PopoverDetail {
         <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>Supporting information</h2><p>Attach contextual information and actions to a nearby trigger.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="popover-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="Popover" size="default" title="Popover example" description="A polished default popover for a modern application." open="true" closeLabel="Popover" class="showcase-instance showcase-instance--1"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the popover</p>
+            <div class="demo-render"><Popover open="false" defaultOpen="false" triggerLabel="View details" triggerIcon="icon-[lucide--info]" title="Verified public information" description="This panel can contain text, actions, forms, or custom content." icon="icon-[lucide--badge-check]" width="lg" size="default" variant="raised" showArrow="true" showClose="true" closeLabel="Popover" closeOnOutside="true" closeOnEscape="true" actionLabel="Open guide" actionHref="#guide" closeOnAction="true" disabled="false" class="showcase-instance showcase-instance--1"><p>Popover content remains attached to its trigger and becomes mobile-friendly on small screens.</p></Popover></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Supporting information 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;Popover
-  title="Popover example"
+  triggerLabel="View details"
-  description="A polished default popover for a modern application."
+  triggerIcon="icon-[lucide--info]"
-  open="true"
+  title="Verified public information"
+  description="This panel can contain text, actions, forms, or custom content."
+  icon="icon-[lucide--badge-check]"
+  width="lg"
+  showClose="true"
   closeLabel="Popover"
-/&gt;</code></pre>
+  actionLabel="Open guide"
+  actionHref="#guide"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;Popover content remains attached to its trigger and becomes mobile-friendly on small screens.&lt;/p&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Popover&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 action popover</h2><p>Use a small popover for quick actions and concise explanations.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="popover-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="Popover" size="sm" title="Compact Popover" description="A compact configuration for dashboards and dense product surfaces." open="true" closeLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the popover</p>
+            <div class="demo-render"><Popover open="false" defaultOpen="false" triggerLabel="Quick actions" triggerIcon="icon-[lucide--zap]" title="Quick actions" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" placement="top" width="sm" size="sm" variant="soft" showArrow="true" showClose="true" closeLabel="Compact example" closeOnOutside="true" closeOnEscape="true" actionLabel="Compact example" actionHref="#popover-demo" closeOnAction="true" disabled="false" class="showcase-instance showcase-instance--2"><div class="showcase-inline-actions"><button class="showcase-action">Copy</button><button class="showcase-action">Share</button></div></Popover></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact action popover 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;Popover
-  size="sm"
+  triggerLabel="Quick actions"
-  title="Compact Popover"
+  triggerIcon="icon-[lucide--zap]"
+  title="Quick actions"
   description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
+  icon="icon-[lucide--arrow-right]"
+  placement="top"
+  width="sm"
+  size="sm"
+  variant="soft"
+  showClose="true"
   closeLabel="Compact example"
-/&gt;</code></pre>
+  actionLabel="Compact example"
+  actionHref="#popover-demo"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-inline-actions"&gt;&lt;button class="showcase-action"&gt;Copy&lt;/button&gt;&lt;button class="showcase-action"&gt;Share&lt;/button&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Popover&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 status popover</h2><p>Open a wide panel with close control, arrow, custom content, and footer action.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="popover-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="Popover" size="lg" title="Advanced Popover" description="A richer configuration demonstrating additional content and hierarchy." open="true" closeLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the popover</p>
+            <div class="demo-render"><Popover open="false" defaultOpen="false" triggerLabel="Open rich panel" title="Service status" description="Current operational information." icon="icon-[lucide--trash-2]" placement="bottom-end" width="xl" size="lg" variant="raised" showArrow="true" showClose="true" closeLabel="Advanced example" closeOnOutside="true" closeOnEscape="true" actionLabel="Open status page" actionHref="#status" closeOnAction="true" disabled="false" class="showcase-instance showcase-instance--3"><div class="showcase-status-panel"><strong>All systems operational</strong><span>Last checked moments ago</span></div></Popover></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Rich status popover 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;Popover
+  triggerLabel="Open rich panel"
+  title="Service status"
+  description="Current operational information."
+  icon="icon-[lucide--trash-2]"
+  placement="bottom-end"
+  width="xl"
   size="lg"
-  title="Advanced Popover"
+  showClose="true"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
   closeLabel="Advanced example"
-/&gt;</code></pre>
+  actionLabel="Open status page"
+  actionHref="#status"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-status-panel"&gt;&lt;strong&gt;All systems operational&lt;/strong&gt;&lt;span&gt;Last checked moments ago&lt;/span&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/Popover&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>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</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;Popover
+  @toggle='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='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=\"Popover\"], [data-component=\"Popover\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
+component?.addEventListener("toggle", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("toggle", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
-        <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>"Popover"</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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</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("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", 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>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>"Open popover"</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>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>placement</code></td><td>string</td><td><code>"bottom-start"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close popover"</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</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>closeOnAction</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>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="#popover-demo-1">Production default</a><a href="#popover-demo-2">Compact application</a><a href="#popover-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="#popover-demo-1">Supporting information</a><a href="#popover-demo-2">Compact action popover</a><a href="#popover-demo-3">Rich status popover</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/portal-dashboard.wrn

@@ -10,34 +10,34 @@ page PortalDashboardDetail {
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default portal dashboard for a modern application."
   state playground_descriptionKey = ctx.url.searchParams.get("pg_descriptionKey") ?? "A polished default portal dashboard for a modern application."
   state playground_userName = ctx.url.searchParams.get("pg_userName") ?? ""
-  state playground_metrics = ctx.url.searchParams.get("pg_metrics") ?? "[\n  {\n    \"id\": \"portal-dashboard-0-1\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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\": \"portal-dashboard-0-2\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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_metrics = JSON.parse(ctx.url.searchParams.get("pg_metrics") ?? "[{\"id\":\"portal-dashboard-0-1\",\"key\":\"portal-dashboard-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\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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\":\"portal-dashboard-0-2\",\"key\":\"portal-dashboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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_actions = ctx.url.searchParams.get("pg_actions") ?? "[\n  {\n    \"id\": \"portal-dashboard-0-1\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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\": \"portal-dashboard-0-2\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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") ?? "[{\"id\":\"portal-dashboard-0-1\",\"key\":\"portal-dashboard-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\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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\":\"portal-dashboard-0-2\",\"key\":\"portal-dashboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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_updates = ctx.url.searchParams.get("pg_updates") ?? "[\n  {\n    \"id\": \"portal-dashboard-0-1\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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\": \"portal-dashboard-0-2\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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_updates = JSON.parse(ctx.url.searchParams.get("pg_updates") ?? "[{\"id\":\"portal-dashboard-0-1\",\"key\":\"portal-dashboard-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\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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\":\"portal-dashboard-0-2\",\"key\":\"portal-dashboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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_tasks = ctx.url.searchParams.get("pg_tasks") ?? "[\n  {\n    \"id\": \"portal-dashboard-0-1\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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\": \"portal-dashboard-0-2\",\n    \"key\": \"portal-dashboard-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\": \"#portal-dashboard-demo\",\n    \"actionHref\": \"#portal-dashboard-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_tasks = JSON.parse(ctx.url.searchParams.get("pg_tasks") ?? "[{\"id\":\"portal-dashboard-0-1\",\"key\":\"portal-dashboard-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\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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\":\"portal-dashboard-0-2\",\"key\":\"portal-dashboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#portal-dashboard-demo\",\"actionHref\":\"#portal-dashboard-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_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Portal Dashboard"
-    description = "Responsive portal dashboard with metrics, actions, tasks, and updates."
+    description = "Reusable portal dashboard component."
   }
   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>Portal Dashboard</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Portal Dashboard</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Blocks component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Portal Dashboard</h1>
-        <p>Responsive portal dashboard with metrics, actions, tasks, and updates.</p>
+        <p>Reusable portal dashboard component.</p>
         <div class="detail-badges"><span>14 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="PortalDashboard" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PortalDashboard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="action,navigate">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Portal Dashboard</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="PortalDashboard" size="{playground_size}" color="{playground_color}" eyebrow="{playground_eyebrow}" eyebrowKey="{playground_eyebrowKey}" title="{playground_title}" titleKey="{playground_titleKey}" description="{playground_description}" descriptionKey="{playground_descriptionKey}" userName="{playground_userName}" metrics="{playground_metrics}" actions="{playground_actions}" updates="{playground_updates}" tasks="{playground_tasks}" class="{playground_class}"><div slot="hero-action" class="showcase-slot">hero-action slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><PortalDashboard size='{playground_size}' color='{playground_color}' eyebrow='{playground_eyebrow}' eyebrowKey='{playground_eyebrowKey}' title='{playground_title}' titleKey='{playground_titleKey}' description='{playground_description}' descriptionKey='{playground_descriptionKey}' userName='{playground_userName}' metrics='{playground_metrics}' actions='{playground_actions}' updates='{playground_updates}' tasks='{playground_tasks}' 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;PortalDashboard
@@ -476,10 +476,13 @@ page PortalDashboardDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add hero-action slot content here --&gt;
+  &lt;div data-slot="hero-action"&gt;
+    &lt;div class="showcase-slot"&gt;hero-action slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PortalDashboard&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>
@@ -926,7 +929,8 @@ page PortalDashboardDetail {
         <div class="demo-workbench">
           <div id="portal-dashboard-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="PortalDashboard" size="default" title="Portal Dashboard example" description="A polished default portal dashboard for a modern application." descriptionKey="A polished default portal dashboard for a modern application." metrics="[{&quot;id&quot;:&quot;portal-dashboard-0-1&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;portal-dashboard-0-2&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;]}]" actions="[{&quot;id&quot;:&quot;portal-dashboard-0-1&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;vaLine truncated
+            
+            <div class="demo-render"><PortalDashboard size="default" title="Portal Dashboard example" description="A polished default portal dashboard for a modern application." descriptionKey="A polished default portal dashboard for a modern application." metrics='[{"id":"portal-dashboard-0-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-0-2","key":"portal-dashboard-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#portal-dashboard-demo","actionHref":"#portal-dashboard-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"portal-dashboard-0-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-0-2","key":"portal-dashboard-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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"]}]' updates='[{"id":"portal-dashboard-0-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-0-2","key":"portal-dashboard-0-2","value":"secondary","laLine truncated
           </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>
@@ -1366,7 +1370,9 @@ page PortalDashboardDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add hero-action slot content here --&gt;
+  &lt;div data-slot="hero-action"&gt;
+    &lt;div class="showcase-slot"&gt;hero-action slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PortalDashboard&gt;</code></pre>
           </section>
         </div>
@@ -1379,7 +1385,8 @@ page PortalDashboardDetail {
         <div class="demo-workbench">
           <div id="portal-dashboard-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="PortalDashboard" size="sm" title="Compact Portal Dashboard" description="A compact configuration for dashboards and dense product surfaces." descriptionKey="A compact configuration for dashboards and dense product surfaces." metrics="[{&quot;id&quot;:&quot;portal-dashboard-1-1&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;portal-dashboard-1-2&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;]}]" actions="[{&quot;id&quot;:&quot;portal-dashboard-1-1&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;valuLine truncated
+            
+            <div class="demo-render"><PortalDashboard size="sm" title="Compact Portal Dashboard" description="A compact configuration for dashboards and dense product surfaces." descriptionKey="A compact configuration for dashboards and dense product surfaces." metrics='[{"id":"portal-dashboard-1-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-1-2","key":"portal-dashboard-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#portal-dashboard-demo","actionHref":"#portal-dashboard-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"portal-dashboard-1-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-1-2","key":"portal-dashboard-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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"]}]' updates='[{"id":"portal-dashboard-1-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-1-2","key":"portal-dashboard-1-2","value":"secondary","label":"AdLine truncated
           </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>
@@ -1820,7 +1827,9 @@ page PortalDashboardDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add hero-action slot content here --&gt;
+  &lt;div data-slot="hero-action"&gt;
+    &lt;div class="showcase-slot"&gt;hero-action slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PortalDashboard&gt;</code></pre>
           </section>
         </div>
@@ -1833,7 +1842,8 @@ page PortalDashboardDetail {
         <div class="demo-workbench">
           <div id="portal-dashboard-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="PortalDashboard" size="lg" title="Advanced Portal Dashboard" description="A richer configuration demonstrating additional content and hierarchy." descriptionKey="A richer configuration demonstrating additional content and hierarchy." metrics="[{&quot;id&quot;:&quot;portal-dashboard-2-1&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;portal-dashboard-2-2&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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;]}]" actions="[{&quot;id&quot;:&quot;portal-dashboard-2-1&quot;,&quot;key&quot;:&quot;portal-dashboard-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;#portal-dashboard-demo&quot;,&quot;actionHref&quot;:&quot;#portal-dashboard-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&quotLine truncated
+            
+            <div class="demo-render"><PortalDashboard size="lg" title="Advanced Portal Dashboard" description="A richer configuration demonstrating additional content and hierarchy." descriptionKey="A richer configuration demonstrating additional content and hierarchy." metrics='[{"id":"portal-dashboard-2-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-2-2","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' actions='[{"id":"portal-dashboard-2-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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":"portal-dashboard-2-2","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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"]}]' updates='[{"id":"portal-dashboard-2-1","key":"portal-dashboard-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":"#portal-dashboard-demo","actionHref":"#portal-dashboard-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-rLine truncated
           </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>
@@ -2274,16 +2284,25 @@ page PortalDashboardDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add hero-action slot content here --&gt;
+  &lt;div data-slot="hero-action"&gt;
+    &lt;div class="showcase-slot"&gt;hero-action slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PortalDashboard&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>@navigate</code><span>Fires when the component emits the navigate 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>@action</code><span>Fires when the component's primary or item action is activated.</span></div><div><code>@navigate</code><span>Fires when the component emits the navigate 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;PortalDashboard
+  @action='console.log(event.detail)'
+  @navigate='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=\"PortalDashboard\"], [data-component=\"PortalDashboard\"]")
 
-component.addEventListener('action', (event) =&gt; &#123;
+component?.addEventListener("action", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("action", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("navigate", (event) =&gt; &#123;
+  console.log("navigate", 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>eyebrow</code></td><td>string</td><td><code>"Overview"</code></td><td>No</td></tr><tr><td><code>eyebrowKey</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Dashboard"</code></td><td>No</td></tr><tr><td><code>titleKey</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>descriptionKey</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>userName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>metrics</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>updates</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>tasks</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">
@@ -2291,8 +2310,8 @@ component.addEventListener('action', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/page-header"><small>Previous</small><strong>← Page Header</strong></a>
+      <a href="/components/auth-split-layout"><small>Previous</small><strong>← Auth Split Layout</strong></a>
-      <a href="/components/split-hero"><small>Next</small><strong>Split Hero →</strong></a>
+      <a href="/components/preference-switcher"><small>Next</small><strong>Preference Switcher →</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;
+component?.addEventListener("theme", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("theme", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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/portal-dashboard"><small>Previous</small><strong>← Portal Dashboard</strong></a>
-      <a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</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_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
+  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/range-slider.wrn

@@ -3,30 +3,30 @@ page RangeSliderDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "range-slider-1"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "range-sliderField"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Volume"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter range slider"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "60"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
-  state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
+  state playground_min = Number(ctx.url.searchParams.get("pg_min") ?? "0")
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
-  state playground_step = ctx.url.searchParams.get("pg_step") ?? "5"
+  state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
+  state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
-  state playground_showBounds = ctx.url.searchParams.get("pg_showBounds") ?? "true"
+  state playground_showBounds = (ctx.url.searchParams.get("pg_showBounds") ?? "true") === "true"
-  state playground_showSteps = ctx.url.searchParams.get("pg_showSteps") ?? "false"
+  state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "true") === "true"
-  state playground_marks = ctx.url.searchParams.get("pg_marks") ?? "[]"
+  state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[{\"id\":\"range-slider-0-1\",\"key\":\"range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"range-slider-0-2\",\"key\":\"range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
   state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
   state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
-  state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
-  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 = "Range Slider"
     description = "Theme-aware, responsive range slider component."
@@ -44,30 +44,242 @@ page RangeSliderDetail {
       </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="RangeSlider" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="RangeSlider" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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="RangeSlider" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" value="{playground_value}" min="{playground_min}" max="{playground_max}" step="{playground_step}" showValue="{playground_showValue}" showBounds="{playground_showBounds}" showSteps="{playground_showSteps}" marks="{playground_marks}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><RangeSlider size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' min='{playground_min}' max='{playground_max}' step='{playground_step}' showValue='{playground_showValue}' showBounds='{playground_showBounds}' showSteps='{playground_showSteps}' marks='{playground_marks}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;RangeSlider
-  id="range-slider-1"
+  label="Range Slider"
-  name="range-sliderField"
+  placeholder="Enter a sample value"
-  label="Volume"
+  value="36"
-  placeholder="Enter range slider"
+  showSteps="true"
-  value="60"
+  marks='[
-  step="5"
+    &#123;
-  marks='[]'
+      "id": "range-slider-0-1",
-  helperText="Helpful context for this field."
+      "key": "range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "id": "range-slider-0-2",
+      "key": "range-slider-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;
+  ]'
 /&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>
-          <div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="range-slider-1" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="range-sliderField" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Volume" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter range slider" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-range-slider-variant" name="pg_variant"><option value="normal" selected>normal</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-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="60" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="5" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><lLine truncated
+          <div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Range Slider" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-range-slider-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-marks"><span><strong>marks</strong><small>string</small></span><textarea id="playground-range-slider-marks" name="pg_marks" rows="5" spellcheck="false" dataLine truncated
+  {
+    "id": "range-slider-0-1",
+    "key": "range-slider-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#range-slider-demo",
+    "actionHref": "#range-slider-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  },
+  {
+    "id": "range-slider-0-2",
+    "key": "range-slider-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#range-slider-demo",
+    "actionHref": "#range-slider-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-range-slider-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-range-slider-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-range-slider-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-error"><span><strong>error</strong><small>string</small></span><input id="playground-range-slider-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-range-slider-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-range-slider-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-range-slider-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-range-slider-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-range-slider-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -76,71 +288,128 @@ page RangeSliderDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</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="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="RangeSlider" size="default" color="primary" id="range-slider-1" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><RangeSlider size="default" label="Range Slider" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="36" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-0-1","key":"range-slider-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"range-slider-0-2","key":"range-slider-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default field 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;RangeSlider
-  id="range-slider-1"
+  label="Range Slider"
-  name="range-sliderField"
+  placeholder="Enter a sample value"
-  label="Volume"
+  value="36"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  helperText="Helpful context for this field."
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
-          <span class="demo-case-number">02</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="range-slider-demo-2" class="demo-canvas demo-canvas--2">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-2" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="true" marks="[{&quot;value&quot;:0,&quot;label&quot;:&quot;0&quot;},{&quot;value&quot;:25,&quot;label&quot;:&quot;25&quot;},{&quot;value&quot;:50,&quot;label&quot;:&quot;50&quot;},{&quot;value&quot;:75,&quot;label&quot;:&quot;75&quot;},{&quot;value&quot;:100,&quot;label&quot;:&quot;100&quot;}]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Outlined with start 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;RangeSlider
-  id="range-slider-2"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  value="60"
-  step="5"
   showSteps="true"
   marks='[
     &#123;
-      "value": 0,
+      "id": "range-slider-0-1",
-      "label": "0"
+      "key": "range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "value": 25,
+      "id": "range-slider-0-2",
-      "label": "25"
+      "key": "range-slider-0-2",
-    &#125;,
+      "value": "secondary",
-    &#123;
+      "label": "Additional option",
-      "value": 50,
+      "title": "Supporting example",
-      "label": "50"
+      "description": "A clean default configuration for everyday product interfaces.",
-    &#125;,
+      "text": "Another configurable message.",
-    &#123;
+      "href": "#range-slider-demo",
-      "value": 75,
+      "actionHref": "#range-slider-demo",
-      "label": "75"
+      "actionLabel": "View details",
-    &#125;,
+      "icon": "icon-[lucide--sparkles]",
-    &#123;
+      "iconClass": "icon-[lucide--sparkles]",
-      "value": 100,
+      "variant": "primary",
-      "label": "100"
+      "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;
   ]'
 /&gt;</code></pre>
@@ -149,197 +418,301 @@ page RangeSliderDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</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="range-slider-demo-2" class="demo-canvas demo-canvas--2">
+            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+            
+            <div class="demo-render"><RangeSlider size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="60" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-1-1","key":"range-slider-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"range-slider-1-2","key":"range-slider-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
+          </div>
+          <section class="demo-code" aria-label="Compact application usage">
+            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+            <pre><code>&lt;RangeSlider
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
+  value="60"
+  showSteps="true"
+  marks='[
+    &#123;
+      "id": "range-slider-1-1",
+      "key": "range-slider-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "id": "range-slider-1-2",
+      "key": "range-slider-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        &#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;
+  ]'
+/&gt;</code></pre>
+          </section>
+        </div>
+      </article>
+      <article class="demo-case">
+        <header class="demo-case-header">
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="range-slider-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-3" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><RangeSlider size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="84" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-2-1","key":"range-slider-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"range-slider-2-2","key":"range-slider-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Floating label 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;RangeSlider
-  id="range-slider-3"
+  size="lg"
-  name="range-sliderField"
+  label="Advanced example"
-  label="Volume"
+  placeholder="Search by name, email, or identifier"
-  placeholder="Enter range slider"
+  variant="success"
-  variant="floating"
+  icon="icon-[lucide--trash-2]"
-  icon="icon-[lucide--circle-user-round]"
+  value="84"
-  iconPosition="end"
+  showSteps="true"
-  value="60"
+  marks='[
-  step="5"
+    &#123;
-  marks='[]'
+      "id": "range-slider-2-1",
-/&gt;</code></pre>
+      "key": "range-slider-2-1",
-          </section>
+      "value": "primary",
-        </div>
+      "label": "Advanced workflow",
-      </article>
+      "title": "Advanced workflow",
-      <article class="demo-case">
+      "description": "A richer configuration with more supporting information and actions.",
-        <header class="demo-case-header">
+      "text": "A configurable sample message.",
-          <div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
+      "href": "#range-slider-demo",
-          <span class="demo-case-number">04</span>
+      "actionHref": "#range-slider-demo",
-        </header>
+      "actionLabel": "Explore workflow",
-        <div class="demo-workbench">
+      "icon": "icon-[lucide--circle-check]",
-          <div id="range-slider-demo-4" class="demo-canvas demo-canvas--4">
+      "iconClass": "icon-[lucide--circle-check]",
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+      "variant": "success",
-            <div class="demo-render"><div data-component="RangeSlider" size="sm" color="primary" id="range-slider-4" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="pill" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+      "status": "Complete",
-          </div>
+      "time": "11:45",
-          <section class="demo-code" aria-label="Pill and compact size usage">
+      "current": true,
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+      "selected": true,
-            <pre><code>&lt;RangeSlider
+      "checked": true,
-  size="sm"
+      "disabled": false,
-  id="range-slider-4"
+      "outgoing": false,
-  name="range-sliderField"
+      "open": true,
-  label="Volume"
+      "number": 1,
-  placeholder="Enter range slider"
+      "count": 32,
-  variant="pill"
+      "percentage": 91,
-  value="60"
+      "color": "#059669",
-  step="5"
+      "target": "_self",
-  marks='[]'
+      "ariaLabel": "Open advanced workflow 1",
-/&gt;</code></pre>
+      "items": [
-          </section>
+        &#123;
-        </div>
+          "label": "Nested option A",
-      </article>
+          "value": "nested-a"
-      <article class="demo-case">
+        &#125;,
-        <header class="demo-case-header">
+        &#123;
-          <div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
+          "label": "Nested option B",
-          <span class="demo-case-number">05</span>
+          "value": "nested-b"
-        </header>
+        &#125;
-        <div class="demo-workbench">
+      ],
-          <div id="range-slider-demo-5" class="demo-canvas demo-canvas--5">
+      "links": [
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+        &#123;
-            <div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-5" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
+          "label": "Documentation",
-          </div>
+          "href": "#documentation"
-          <section class="demo-code" aria-label="Read only usage">
+        &#125;,
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+        &#123;
-            <pre><code>&lt;RangeSlider
+          "label": "API reference",
-  id="range-slider-5"
+          "href": "#api-reference"
-  name="range-sliderField"
+        &#125;
-  label="Volume"
+      ],
-  placeholder="Enter range slider"
+      "values": [
-  value="60"
+        "Included",
-  step="5"
+        "Unlimited"
-  marks='[]'
+      ]
-  readonly="true"
+    &#125;,
-/&gt;</code></pre>
+    &#123;
-          </section>
+      "id": "range-slider-2-2",
-        </div>
+      "key": "range-slider-2-2",
-      </article>
+      "value": "secondary",
-      <article class="demo-case">
+      "label": "Additional option",
-        <header class="demo-case-header">
+      "title": "Supporting example",
-          <div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
+      "description": "A richer configuration with more supporting information and actions.",
-          <span class="demo-case-number">06</span>
+      "text": "Another configurable message.",
-        </header>
+      "href": "#range-slider-demo",
-        <div class="demo-workbench">
+      "actionHref": "#range-slider-demo",
-          <div id="range-slider-demo-6" class="demo-canvas demo-canvas--6">
+      "actionLabel": "Explore workflow",
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+      "icon": "icon-[lucide--circle-check]",
-            <div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-6" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
+      "iconClass": "icon-[lucide--circle-check]",
-          </div>
+      "variant": "success",
-          <section class="demo-code" aria-label="Disabled usage">
+      "status": "Complete",
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+      "time": "11:45",
-            <pre><code>&lt;RangeSlider
+      "current": false,
-  id="range-slider-6"
+      "selected": false,
-  name="range-sliderField"
+      "checked": false,
-  label="Volume"
+      "disabled": true,
-  placeholder="Enter range slider"
+      "outgoing": true,
-  value="60"
+      "open": true,
-  step="5"
+      "number": 2,
-  marks='[]'
+      "count": 64,
-  disabled="true"
+      "percentage": 91,
-/&gt;</code></pre>
+      "color": "#059669",
-          </section>
+      "target": "_self",
-        </div>
+      "ariaLabel": "Open advanced workflow 2",
-      </article>
+      "items": [
-      <article class="demo-case">
+        &#123;
-        <header class="demo-case-header">
+          "label": "Nested option A",
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
+          "value": "nested-a"
-          <span class="demo-case-number">07</span>
+        &#125;,
-        </header>
+        &#123;
-        <div class="demo-workbench">
+          "label": "Nested option B",
-          <div id="range-slider-demo-7" class="demo-canvas demo-canvas--7">
+          "value": "nested-b"
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+        &#125;
-            <div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-7" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
+      ],
-          </div>
+      "links": [
-          <section class="demo-code" aria-label="Inline helper text usage">
+        &#123;
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+          "label": "Documentation",
-            <pre><code>&lt;RangeSlider
+          "href": "#documentation"
-  id="range-slider-7"
+        &#125;,
-  name="range-sliderField"
+        &#123;
-  label="Volume"
+          "label": "API reference",
-  placeholder="Enter range slider"
+          "href": "#api-reference"
-  value="60"
+        &#125;
-  step="5"
+      ],
-  marks='[]'
+      "values": [
-  helperText="We'll never share your details."
+        "Included",
-  inline="true"
+        "Unlimited"
-/&gt;</code></pre>
+      ]
-          </section>
+    &#125;
-        </div>
+  ]'
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="range-slider-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="RangeSlider" size="default" color="primary" id="range-slider-8" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Field with corner hint usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;RangeSlider
-  id="range-slider-8"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  cornerHint="Optional"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="range-slider-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-9" name="validatedField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
-          </div>
-          <section class="demo-code" aria-label="Validated field usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;RangeSlider
-  id="range-slider-9"
-  name="validatedField"
-  label="Volume"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  required="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="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>@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>@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>@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;RangeSlider
+  @input='console.log(event.detail)'
+  @change='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=\"RangeSlider\"], [data-component=\"RangeSlider\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", 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>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Range"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>min</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showBounds</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showSteps</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>marks</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Default field</a><a href="#range-slider-demo-2">Outlined with start icon</a><a href="#range-slider-demo-3">Floating label</a><a href="#range-slider-demo-4">Pill and compact size</a><a href="#range-slider-demo-5">Read only</a><a href="#range-slider-demo-6">Disabled</a><a href="#range-slider-demo-7">Inline helper text</a><a href="#range-slider-demo-8">Field with corner hint</a><a href="#range-slider-demo-9">Validated field</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="#range-slider-demo-1">Production default</a><a href="#range-slider-demo-2">Compact application</a><a href="#range-slider-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/radio"><small>Previous</small><strong>← Radio</strong></a>
-      <a href="/components/select"><small>Next</small><strong>Select →</strong></a>
+      <a href="/components/search-box"><small>Next</small><strong>Search Box →</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;
+component?.addEventListener("input", (event) =&gt; &#123;
-  console.log(event.detail)
+  console.log("input", event.detail)
-&#125;)</code></pre></section></div></section>
+&#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">